@cqa-lib/cqa-ui 1.1.161 → 1.1.166
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/step-builder/step-builder-action/step-builder-action.component.mjs +75 -12
- package/esm2020/lib/test-case-details/ai-agent-step/ai-agent-step.component.mjs +8 -4
- package/esm2020/lib/test-case-details/api-step/api-step.component.mjs +8 -5
- package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs +13 -3
- package/esm2020/lib/test-case-details/custom-code-step/custom-code-step.component.mjs +8 -4
- package/esm2020/lib/test-case-details/database-step/database-step.component.mjs +8 -5
- package/esm2020/lib/test-case-details/loop-step/loop-step.component.mjs +13 -3
- package/esm2020/lib/test-case-details/normal-step/normal-step.component.mjs +8 -5
- package/esm2020/lib/test-case-details/screenshot-step/screenshot-step.component.mjs +8 -5
- package/esm2020/lib/test-case-details/step-group/step-group.component.mjs +13 -3
- package/esm2020/lib/test-case-details/test-case-details-renderer/test-case-details-renderer.component.mjs +13 -3
- package/esm2020/lib/test-case-details/upload-step/upload-step.component.mjs +8 -4
- package/esm2020/lib/ui-kit.module.mjs +8 -4
- package/fesm2015/cqa-lib-cqa-ui.mjs +194 -70
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +193 -70
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/step-builder/step-builder-action/step-builder-action.component.d.ts +15 -3
- package/lib/test-case-details/ai-agent-step/ai-agent-step.component.d.ts +2 -1
- package/lib/test-case-details/api-step/api-step.component.d.ts +2 -1
- package/lib/test-case-details/condition-step/condition-step.component.d.ts +8 -1
- package/lib/test-case-details/custom-code-step/custom-code-step.component.d.ts +2 -1
- package/lib/test-case-details/database-step/database-step.component.d.ts +2 -1
- package/lib/test-case-details/loop-step/loop-step.component.d.ts +8 -1
- package/lib/test-case-details/normal-step/normal-step.component.d.ts +2 -1
- package/lib/test-case-details/screenshot-step/screenshot-step.component.d.ts +2 -1
- package/lib/test-case-details/step-group/step-group.component.d.ts +8 -1
- package/lib/test-case-details/test-case-details-renderer/test-case-details-renderer.component.d.ts +8 -1
- package/lib/test-case-details/upload-step/upload-step.component.d.ts +2 -1
- package/lib/ui-kit.module.d.ts +2 -1
- package/package.json +2 -1
- package/styles.css +1 -1
|
@@ -2,17 +2,17 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Inject, NgModule, Injector } from '@angular/core';
|
|
3
3
|
import * as i2$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i2$2 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1 from '@angular/material/icon';
|
|
8
8
|
import { MatIconModule } from '@angular/material/icon';
|
|
9
9
|
import * as i3$1 from '@angular/material/menu';
|
|
10
10
|
import { MatMenuModule } from '@angular/material/menu';
|
|
11
|
-
import * as i1$
|
|
11
|
+
import * as i1$2 from '@angular/material/button';
|
|
12
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
13
|
-
import * as i1$
|
|
13
|
+
import * as i1$3 from '@angular/material/form-field';
|
|
14
14
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
|
-
import * as i2$
|
|
15
|
+
import * as i2$3 from '@angular/material/select';
|
|
16
16
|
import { MatSelectModule } from '@angular/material/select';
|
|
17
17
|
import * as i3$2 from '@angular/material/core';
|
|
18
18
|
import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
|
|
@@ -21,22 +21,24 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
|
21
21
|
import * as i4 from '@angular/material/radio';
|
|
22
22
|
import { MatRadioModule } from '@angular/material/radio';
|
|
23
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
|
-
import * as i1$
|
|
24
|
+
import * as i1$5 from '@angular/material/progress-spinner';
|
|
25
25
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
26
26
|
import * as i2 from '@angular/material/tooltip';
|
|
27
27
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
28
|
-
import * as i1$
|
|
28
|
+
import * as i1$4 from '@angular/material/dialog';
|
|
29
29
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
30
|
-
import * as i1$
|
|
30
|
+
import * as i1$7 from '@angular/cdk/overlay';
|
|
31
31
|
import { OverlayContainer, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
32
32
|
import * as i3 from '@angular/cdk/portal';
|
|
33
33
|
import { TemplatePortal, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
|
|
34
|
-
import * as i1$
|
|
34
|
+
import * as i1$6 from 'ngx-typed-js';
|
|
35
35
|
import { NgxTypedJsModule } from 'ngx-typed-js';
|
|
36
|
-
import * as i1$
|
|
36
|
+
import * as i1$1 from '@angular/platform-browser';
|
|
37
37
|
import * as jquery from 'jquery';
|
|
38
38
|
import * as momentImport from 'moment';
|
|
39
39
|
import 'daterangepicker';
|
|
40
|
+
import * as i7 from 'ngx-drag-drop';
|
|
41
|
+
import { DndModule } from 'ngx-drag-drop';
|
|
40
42
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
41
43
|
import { filter } from 'rxjs/operators';
|
|
42
44
|
|
|
@@ -402,7 +404,7 @@ class SearchBarComponent {
|
|
|
402
404
|
}
|
|
403
405
|
}
|
|
404
406
|
SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
405
|
-
SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <form\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]\" (submit)=\"onSubmit($event)\">\n <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [style.color]=\"disabled ? 'rgba(156,163,175,0.38)' : '#99999E'\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n search\n </mat-icon>\n </span>\n\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[180px] 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 [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n\n <button *ngIf=\"showClear && inputValue\" 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()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </form>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type:
|
|
407
|
+
SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <form\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]\" (submit)=\"onSubmit($event)\">\n <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [style.color]=\"disabled ? 'rgba(156,163,175,0.38)' : '#99999E'\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n search\n </mat-icon>\n </span>\n\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[180px] 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 [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n\n <button *ngIf=\"showClear && inputValue\" 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()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </form>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
406
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
407
409
|
type: Component,
|
|
408
410
|
args: [{ selector: 'cqa-search-bar', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <form\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]\" (submit)=\"onSubmit($event)\">\n <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [style.color]=\"disabled ? 'rgba(156,163,175,0.38)' : '#99999E'\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n search\n </mat-icon>\n </span>\n\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[180px] 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 [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n\n <button *ngIf=\"showClear && inputValue\" 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()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </form>\n</div>", styles: [] }]
|
|
@@ -1338,12 +1340,12 @@ class DynamicTableComponent {
|
|
|
1338
1340
|
return sa.localeCompare(sb, undefined, { sensitivity: 'base', numeric: true });
|
|
1339
1341
|
}
|
|
1340
1342
|
}
|
|
1341
|
-
DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i1$
|
|
1343
|
+
DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1342
1344
|
DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { sortChange: "sortChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n <colgroup>\n <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n <col [style.width]=\"width\" />\n </ng-container>\n </colgroup>\n\n <thead *ngIf=\"data?.length\">\n <tr class=\"table-header cqa-items-center\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <th\n class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n [ngClass]=\"[\n col.fieldId + '-cell',\n col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n ]\">\n <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n <ng-container\n *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n <div class=\"custom-checkbox\">\n <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n </div>\n </ng-container>\n <ng-template #headerTplOrDefault>\n <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <ng-container *ngIf=\"col.sortable; else plainHeader\">\n <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n col.fieldName }}</span>\n <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n </button>\n </ng-container>\n <ng-template #plainHeader>\n <span class=\"header-text\">{{ col.fieldName }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody class=\"table-body cqa-w-full\">\n <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n [class.selected]=\"row?.isSelected\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n [ngClass]=\"[\n col.fieldId + '-cell',\n col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n ]\">\n <!-- Built-in checkbox cell when no custom template is provided -->\n <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n <div class=\"custom-checkbox\" [ngClass]=\"[\n col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n ]\">\n <input\n type=\"checkbox\"\n class=\"hidden-checkbox\"\n [attr.id]=\"'row-checkbox-' + rowIndex\"\n aria-label=\"Select row\"\n [checked]=\"row?.isSelected\"\n (change)=\"onRowSelectChange($event, row)\" />\n <label\n class=\"custom-checkbox-label\"\n [attr.for]=\"'row-checkbox-' + rowIndex\">\n </label>\n </div>\n </ng-container>\n <ng-template #regularCell>\n <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n <ng-container \n cqaCellContainer \n #cellContainer=\"cqaCellContainer\"\n [componentConfig]=\"renderedValue\"\n [row]=\"row\"\n [column]=\"col\"\n [rowIndex]=\"rowIndex\"\n [colId]=\"col.fieldId\">\n </ng-container>\n </ng-container>\n <ng-template #nonComponentCell>\n <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\" [ngClass]=\"[\n col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n ]\"></div>\n </ng-container>\n <ng-template #textCell>\n <span class=\"cqa-text-xs cqa-text-[#374151]\" [ngClass]=\"[\n col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n ]\">{{ renderedValue }}</span>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n</div>", components: [{ type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: ["label"] }, { type: TableDataLoaderComponent, selector: "cqa-table-data-loader", inputs: ["label", "size"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1343
1345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
1344
1346
|
type: Component,
|
|
1345
1347
|
args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n <colgroup>\n <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n <col [style.width]=\"width\" />\n </ng-container>\n </colgroup>\n\n <thead *ngIf=\"data?.length\">\n <tr class=\"table-header cqa-items-center\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <th\n class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n [ngClass]=\"[\n col.fieldId + '-cell',\n col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n ]\">\n <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n <ng-container\n *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n <div class=\"custom-checkbox\">\n <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n </div>\n </ng-container>\n <ng-template #headerTplOrDefault>\n <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <ng-container *ngIf=\"col.sortable; else plainHeader\">\n <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n col.fieldName }}</span>\n <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n </button>\n </ng-container>\n <ng-template #plainHeader>\n <span class=\"header-text\">{{ col.fieldName }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody class=\"table-body cqa-w-full\">\n <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n [class.selected]=\"row?.isSelected\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n [ngClass]=\"[\n col.fieldId + '-cell',\n col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n ]\">\n <!-- Built-in checkbox cell when no custom template is provided -->\n <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n <div class=\"custom-checkbox\" [ngClass]=\"[\n col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n ]\">\n <input\n type=\"checkbox\"\n class=\"hidden-checkbox\"\n [attr.id]=\"'row-checkbox-' + rowIndex\"\n aria-label=\"Select row\"\n [checked]=\"row?.isSelected\"\n (change)=\"onRowSelectChange($event, row)\" />\n <label\n class=\"custom-checkbox-label\"\n [attr.for]=\"'row-checkbox-' + rowIndex\">\n </label>\n </div>\n </ng-container>\n <ng-template #regularCell>\n <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n <ng-container \n cqaCellContainer \n #cellContainer=\"cqaCellContainer\"\n [componentConfig]=\"renderedValue\"\n [row]=\"row\"\n [column]=\"col\"\n [rowIndex]=\"rowIndex\"\n [colId]=\"col.fieldId\">\n </ng-container>\n </ng-container>\n <ng-template #nonComponentCell>\n <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\" [ngClass]=\"[\n col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n ]\"></div>\n </ng-container>\n <ng-template #textCell>\n <span class=\"cqa-text-xs cqa-text-[#374151]\" [ngClass]=\"[\n col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n ]\">{{ renderedValue }}</span>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n</div>", styles: [] }]
|
|
1346
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
1348
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
1347
1349
|
type: Input
|
|
1348
1350
|
}], columns: [{
|
|
1349
1351
|
type: Input
|
|
@@ -1524,7 +1526,7 @@ class ActionMenuButtonComponent {
|
|
|
1524
1526
|
}
|
|
1525
1527
|
}
|
|
1526
1528
|
ActionMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1527
|
-
ActionMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: { row: "row", actions: "actions" }, outputs: { view: "view", edit: "edit", delete: "delete", actionClick: "actionClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n type=\"button\" aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n\n <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n <!-- Dynamic actions (if provided) -->\n <ng-container *ngIf=\"actions?.length; else defaultActions\">\n <button\n mat-menu-item\n *ngFor=\"let a of actions\"\n [disabled]=\"a.disabled\"\n [class]=\"a.class\"\n (click)=\"onActionSelect(a)\"\n [matTooltip]=\"a.tooltip || ''\"\n [matTooltipDisabled]=\"!a.tooltip\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"a.icon\">{{ a.icon }}</mat-icon>\n <span>{{ a.label }}</span>\n </button>\n </ng-container>\n\n <!-- Backward-compatible defaults -->\n <ng-template #defaultActions>\n <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n <mat-icon>visibility</mat-icon>\n <span>View</span>\n </button>\n <button mat-menu-item (click)=\"editTestCase(row)\">\n <mat-icon>edit_square</mat-icon>\n <span>Edit</span>\n </button>\n <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n </mat-menu>\n</div>", components: [{ type: i1$
|
|
1529
|
+
ActionMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: { row: "row", actions: "actions" }, outputs: { view: "view", edit: "edit", delete: "delete", actionClick: "actionClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n type=\"button\" aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n\n <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n <!-- Dynamic actions (if provided) -->\n <ng-container *ngIf=\"actions?.length; else defaultActions\">\n <button\n mat-menu-item\n *ngFor=\"let a of actions\"\n [disabled]=\"a.disabled\"\n [class]=\"a.class\"\n (click)=\"onActionSelect(a)\"\n [matTooltip]=\"a.tooltip || ''\"\n [matTooltipDisabled]=\"!a.tooltip\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"a.icon\">{{ a.icon }}</mat-icon>\n <span>{{ a.label }}</span>\n </button>\n </ng-container>\n\n <!-- Backward-compatible defaults -->\n <ng-template #defaultActions>\n <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n <mat-icon>visibility</mat-icon>\n <span>View</span>\n </button>\n <button mat-menu-item (click)=\"editTestCase(row)\">\n <mat-icon>edit_square</mat-icon>\n <span>Edit</span>\n </button>\n <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n </mat-menu>\n</div>", components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
1528
1530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, decorators: [{
|
|
1529
1531
|
type: Component,
|
|
1530
1532
|
args: [{ selector: 'cqa-action-menu-button', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n type=\"button\" aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n\n <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n <!-- Dynamic actions (if provided) -->\n <ng-container *ngIf=\"actions?.length; else defaultActions\">\n <button\n mat-menu-item\n *ngFor=\"let a of actions\"\n [disabled]=\"a.disabled\"\n [class]=\"a.class\"\n (click)=\"onActionSelect(a)\"\n [matTooltip]=\"a.tooltip || ''\"\n [matTooltipDisabled]=\"!a.tooltip\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"a.icon\">{{ a.icon }}</mat-icon>\n <span>{{ a.label }}</span>\n </button>\n </ng-container>\n\n <!-- Backward-compatible defaults -->\n <ng-template #defaultActions>\n <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n <mat-icon>visibility</mat-icon>\n <span>View</span>\n </button>\n <button mat-menu-item (click)=\"editTestCase(row)\">\n <mat-icon>edit_square</mat-icon>\n <span>Edit</span>\n </button>\n <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n </mat-menu>\n</div>", styles: [] }]
|
|
@@ -2172,7 +2174,7 @@ class DynamicSelectFieldComponent {
|
|
|
2172
2174
|
}
|
|
2173
2175
|
}
|
|
2174
2176
|
DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2175
|
-
DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\" *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <span class=\"cqa-min-w-0\" *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <span *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <span *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n </ng-template>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>", components: [{ type: i1$
|
|
2177
|
+
DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\" *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <span class=\"cqa-min-w-0\" *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <span *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <span *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n </ng-template>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2176
2178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
|
|
2177
2179
|
type: Component,
|
|
2178
2180
|
args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\" *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <span class=\"cqa-min-w-0\" *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <span *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <span *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n </ng-template>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>" }]
|
|
@@ -3135,12 +3137,12 @@ class DynamicFilterComponent {
|
|
|
3135
3137
|
return null;
|
|
3136
3138
|
}
|
|
3137
3139
|
}
|
|
3138
|
-
DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token:
|
|
3139
|
-
DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: ["label", "placeholder", "disabled", "startDate", "endDate", "minDate", "maxDate", "ranges", "autoApply", "alwaysShowCalendars", "opens", "drops", "isInvalidDate", "parentEl"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3140
|
+
DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
3141
|
+
DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: ["label", "placeholder", "disabled", "startDate", "endDate", "minDate", "maxDate", "ranges", "autoApply", "alwaysShowCalendars", "opens", "drops", "isInvalidDate", "parentEl"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3140
3142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
3141
3143
|
type: Component,
|
|
3142
3144
|
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
3143
|
-
}], ctorParameters: function () { return [{ type:
|
|
3145
|
+
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { config: [{
|
|
3144
3146
|
type: Input
|
|
3145
3147
|
}], model: [{
|
|
3146
3148
|
type: Input
|
|
@@ -3206,7 +3208,7 @@ class ColumnVisibilityComponent {
|
|
|
3206
3208
|
}
|
|
3207
3209
|
}
|
|
3208
3210
|
ColumnVisibilityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3209
|
-
ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <cqa-button\n variant=\"grey-solid\"\n icon=\"settings\"\n [matMenuTriggerFor]=\"settingsMenu\"\n aria-label=\"Settings\"\n [tooltip]=\"'Column settings'\"\n tooltipPosition=\"below\">\n </cqa-button>\n\n <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n <div class=\"settings-section cqa-mb-3\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n class=\"select-all-checkbox\">\n {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n </mat-checkbox>\n <!-- Dynamic column list -->\n <ng-container *ngIf=\"columns?.length\">\n <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n (change)=\"saveColumnPreferences()\">\n {{ col.label }}\n </mat-checkbox>\n </ng-container>\n </div>\n </div>\n\n <div class=\"settings-section\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n <div class=\"refresh-options\">\n <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n </mat-radio-group>\n </div>\n </div>\n </div>\n </mat-menu>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type:
|
|
3211
|
+
ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <cqa-button\n variant=\"grey-solid\"\n icon=\"settings\"\n [matMenuTriggerFor]=\"settingsMenu\"\n aria-label=\"Settings\"\n [tooltip]=\"'Column settings'\"\n tooltipPosition=\"below\">\n </cqa-button>\n\n <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n <div class=\"settings-section cqa-mb-3\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n class=\"select-all-checkbox\">\n {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n </mat-checkbox>\n <!-- Dynamic column list -->\n <ng-container *ngIf=\"columns?.length\">\n <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n (change)=\"saveColumnPreferences()\">\n {{ col.label }}\n </mat-checkbox>\n </ng-container>\n </div>\n </div>\n\n <div class=\"settings-section\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n <div class=\"refresh-options\">\n <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n </mat-radio-group>\n </div>\n </div>\n </div>\n </mat-menu>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3210
3212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, decorators: [{
|
|
3211
3213
|
type: Component,
|
|
3212
3214
|
args: [{ selector: 'cqa-column-visibility', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <cqa-button\n variant=\"grey-solid\"\n icon=\"settings\"\n [matMenuTriggerFor]=\"settingsMenu\"\n aria-label=\"Settings\"\n [tooltip]=\"'Column settings'\"\n tooltipPosition=\"below\">\n </cqa-button>\n\n <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n <div class=\"settings-section cqa-mb-3\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n class=\"select-all-checkbox\">\n {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n </mat-checkbox>\n <!-- Dynamic column list -->\n <ng-container *ngIf=\"columns?.length\">\n <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n (change)=\"saveColumnPreferences()\">\n {{ col.label }}\n </mat-checkbox>\n </ng-container>\n </div>\n </div>\n\n <div class=\"settings-section\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n <div class=\"refresh-options\">\n <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n </mat-radio-group>\n </div>\n </div>\n </div>\n </mat-menu>", styles: [] }]
|
|
@@ -3769,7 +3771,7 @@ class DashboardHeaderComponent {
|
|
|
3769
3771
|
}
|
|
3770
3772
|
}
|
|
3771
3773
|
DashboardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3772
|
-
DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", helpIconTooltip: "helpIconTooltip", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", workspaceServerSearch: "workspaceServerSearch", workspaceHasMore: "workspaceHasMore", workspaceIsLoading: "workspaceIsLoading", workspaceOptionStyle: "workspaceOptionStyle", workspaceShowSelectAll: "workspaceShowSelectAll", workspaceCloseOnSelect: "workspaceCloseOnSelect", workspaceOnSearch: "workspaceOnSearch", workspaceOnLoadMore: "workspaceOnLoadMore", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceSearch: "workspaceSearch", workspaceLoadMore: "workspaceLoadMore", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button \n *ngIf=\"showHelpIcon\" \n mat-icon-button \n [matTooltip]=\"helpIconTooltip || 'Help'\"\n [matTooltipDisabled]=\"!helpIconTooltip\"\n matTooltipPosition=\"below\"\n matTooltipShowDelay=\"300\"\n (click)=\"helpIconClick.emit()\" \n class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3774
|
+
DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", helpIconTooltip: "helpIconTooltip", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", workspaceServerSearch: "workspaceServerSearch", workspaceHasMore: "workspaceHasMore", workspaceIsLoading: "workspaceIsLoading", workspaceOptionStyle: "workspaceOptionStyle", workspaceShowSelectAll: "workspaceShowSelectAll", workspaceCloseOnSelect: "workspaceCloseOnSelect", workspaceOnSearch: "workspaceOnSearch", workspaceOnLoadMore: "workspaceOnLoadMore", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceSearch: "workspaceSearch", workspaceLoadMore: "workspaceLoadMore", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button \n *ngIf=\"showHelpIcon\" \n mat-icon-button \n [matTooltip]=\"helpIconTooltip || 'Help'\"\n [matTooltipDisabled]=\"!helpIconTooltip\"\n matTooltipPosition=\"below\"\n matTooltipShowDelay=\"300\"\n (click)=\"helpIconClick.emit()\" \n class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3773
3775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, decorators: [{
|
|
3774
3776
|
type: Component,
|
|
3775
3777
|
args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button \n *ngIf=\"showHelpIcon\" \n mat-icon-button \n [matTooltip]=\"helpIconTooltip || 'Help'\"\n [matTooltipDisabled]=\"!helpIconTooltip\"\n matTooltipPosition=\"below\"\n matTooltipShowDelay=\"300\"\n (click)=\"helpIconClick.emit()\" \n class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [] }]
|
|
@@ -7077,7 +7079,7 @@ class SelfHealAnalysisComponent {
|
|
|
7077
7079
|
}
|
|
7078
7080
|
}
|
|
7079
7081
|
SelfHealAnalysisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelfHealAnalysisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7080
|
-
SelfHealAnalysisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: { originalLocator: "originalLocator", healedLocator: "healedLocator", confidence: "confidence", healMethod: "healMethod", isLoadingAccept: "isLoadingAccept", isLoadingModifyAccept: "isLoadingModifyAccept" }, outputs: { action: "action" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\" *ngIf=\"data?.confidence\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <!-- <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\n </div> -->\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onAccept()\"\n [disabled]=\"isLoadingAccept || isLoadingModifyAccept\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg *ngIf=\"!isLoadingAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n <svg *ngIf=\"isLoadingAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isLoadingAccept ? 'Loading...' : 'Accept' }}</span>\n </button>\n <!-- <button \n (click)=\"onReject()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button> -->\n <button \n (click)=\"onModifyAccept()\"\n [disabled]=\"isLoadingAccept || isLoadingModifyAccept\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg *ngIf=\"!isLoadingModifyAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n <svg *ngIf=\"isLoadingModifyAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isLoadingModifyAccept ? 'Loading...' : 'Modify & Accept' }}</span>\n </button>\n </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
|
|
7082
|
+
SelfHealAnalysisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: { originalLocator: "originalLocator", healedLocator: "healedLocator", confidence: "confidence", healMethod: "healMethod", isLoadingAccept: "isLoadingAccept", isLoadingModifyAccept: "isLoadingModifyAccept" }, outputs: { action: "action" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\" *ngIf=\"data?.confidence\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <!-- <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\n </div> -->\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onAccept()\"\n [disabled]=\"isLoadingAccept || isLoadingModifyAccept\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg *ngIf=\"!isLoadingAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n <svg *ngIf=\"isLoadingAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isLoadingAccept ? 'Loading...' : 'Accept' }}</span>\n </button>\n <!-- <button \n (click)=\"onReject()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button> -->\n <button \n (click)=\"onModifyAccept()\"\n [disabled]=\"isLoadingAccept || isLoadingModifyAccept\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg *ngIf=\"!isLoadingModifyAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n <svg *ngIf=\"isLoadingModifyAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isLoadingModifyAccept ? 'Loading...' : 'Modify & Accept' }}</span>\n </button>\n </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
7081
7083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelfHealAnalysisComponent, decorators: [{
|
|
7082
7084
|
type: Component,
|
|
7083
7085
|
args: [{ selector: 'cqa-self-heal-analysis', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\" *ngIf=\"data?.confidence\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <!-- <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\n </div> -->\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onAccept()\"\n [disabled]=\"isLoadingAccept || isLoadingModifyAccept\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg *ngIf=\"!isLoadingAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n <svg *ngIf=\"isLoadingAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isLoadingAccept ? 'Loading...' : 'Accept' }}</span>\n </button>\n <!-- <button \n (click)=\"onReject()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button> -->\n <button \n (click)=\"onModifyAccept()\"\n [disabled]=\"isLoadingAccept || isLoadingModifyAccept\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg *ngIf=\"!isLoadingModifyAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n <svg *ngIf=\"isLoadingModifyAccept\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isLoadingModifyAccept ? 'Loading...' : 'Modify & Accept' }}</span>\n </button>\n </div>\n</div>\n", styles: [] }]
|
|
@@ -7206,12 +7208,12 @@ class VisualDifferenceModalComponent {
|
|
|
7206
7208
|
this.currentView = views[nextIndex];
|
|
7207
7209
|
}
|
|
7208
7210
|
}
|
|
7209
|
-
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [{ token: i1$
|
|
7211
|
+
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
7210
7212
|
VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", ngImport: i0, template: "<div \n class=\"cqa-ui-root cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-h-[70vh] cqa-w-full cqa-overflow-hidden cqa-font-inter\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
7211
7213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, decorators: [{
|
|
7212
7214
|
type: Component,
|
|
7213
7215
|
args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n class=\"cqa-ui-root cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-h-[70vh] cqa-w-full cqa-overflow-hidden cqa-font-inter\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
7214
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7216
|
+
}], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
|
|
7215
7217
|
type: Inject,
|
|
7216
7218
|
args: [MAT_DIALOG_DATA]
|
|
7217
7219
|
}] }]; } });
|
|
@@ -7340,12 +7342,12 @@ class VisualComparisonComponent {
|
|
|
7340
7342
|
});
|
|
7341
7343
|
}
|
|
7342
7344
|
}
|
|
7343
|
-
VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$
|
|
7345
|
+
VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
7344
7346
|
VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\n <!-- <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button> -->\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n No logs available\n </div>\n </div>\n\n <!-- <a \n *ngIf=\"showFullLogsLink && logs?.length\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a> -->\n </div>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7345
7347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
|
|
7346
7348
|
type: Component,
|
|
7347
7349
|
args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\n <!-- <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button> -->\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n No logs available\n </div>\n </div>\n\n <!-- <a \n *ngIf=\"showFullLogsLink && logs?.length\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a> -->\n </div>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"] }]
|
|
7348
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$
|
|
7350
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }]; }, propDecorators: { screenshots: [{
|
|
7349
7351
|
type: Input
|
|
7350
7352
|
}], logs: [{
|
|
7351
7353
|
type: Input
|
|
@@ -8784,7 +8786,7 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
8784
8786
|
}
|
|
8785
8787
|
}
|
|
8786
8788
|
LoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
8787
|
-
LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", hasChild: "hasChild", isLive: "isLive", isLoading: "isLoading", stepDeleted: "stepDeleted", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", onDownloadHandler: "onDownloadHandler", onFilePathCopiedHandler: "onFilePathCopiedHandler", onTextCopiedHandler: "onTextCopiedHandler", downloadingStepId: "downloadingStepId", step: "step", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", iterationData: "iterationData" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n \n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Loop Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n <!-- Iteration Selector -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations !== undefined)\">\n <label>Iteration</label>\n <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n <!-- Status indicator for selected iteration -->\n <div *ngIf=\"selectedIteration && config?.iterations && config?.iterations?.length > 0\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n </div>\n <select\n class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n [(ngModel)]=\"selectedIteration\"\n (ngModelChange)=\"handleIterationChange($event)\"\n [compareWith]=\"compareIteration\"\n [disabled]=\"(isLive && (status === 'running' || status === 'RUNNING'))\">\n <option *ngIf=\"!config?.iterations || config?.iterations?.length === 0\" value=\"\" disabled>\n No iterations available\n </option>\n <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n {{ getIterationLabel(iteration) }}\n </option>\n </select>\n <!-- Dropdown arrow -->\n <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <span class=\"cqa-ml-auto\" *ngIf=\"config?.iterations && config?.iterations?.length > 0\">\n Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n </span>\n </div>\n\n <!-- Selected Iteration Sub-steps -->\n <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of selectedIteration.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Failure -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Pending -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Running - Show spinner -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"subStep?.status?.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n {{ subStep.description }}\n </span>\n\n <!-- Sub-step Duration -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n\n <!-- Nested Steps -->\n <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1 cqa-nested-steps-container\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n <!-- Loading indicator when nested steps are being loaded -->\n <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\" \n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n </div>\n <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n <!-- Wrapper to show skeleton while step-renderer is loading -->\n <div\n class=\"cqa-step-renderer-wrapper\"\n [attr.id]=\"'exc-' + step.id\"\n [class.loaded]=\"!isNestedStepLoading(step)\">\n <!-- Loading skeleton overlay -->\n <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n </div> -->\n <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n <cqa-step-renderer \n [step]=\"step\"\n [stepNumber]=\"stepNumber + '.' + (i + 1)\"\n [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n [formatActionsHandler]=\"formatActionsHandler\"\n [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [onStepClickHandler]=\"onStepClickHandler\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [onDownloadHandler]=\"onDownloadHandler\"\n [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n [onTextCopiedHandler]=\"onTextCopiedHandler\"\n [downloadingStepId]=\"downloadingStepId\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [selectedIterationId]=\"step?.selectedIterationId || ''\"\n [isLive]=\"isLive\"\n (componentReady)=\"markStepLoaded(step)\">\n </cqa-step-renderer>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n View all iterations\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "getSelfHealLoadingStatesHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "onDownloadHandler", "onFilePathCopiedHandler", "onTextCopiedHandler", "downloadingStepId", "isLive", "stepNumber"], outputs: ["componentReady"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
8789
|
+
LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", hasChild: "hasChild", isLive: "isLive", isLoading: "isLoading", stepDeleted: "stepDeleted", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", onDownloadHandler: "onDownloadHandler", onFilePathCopiedHandler: "onFilePathCopiedHandler", onTextCopiedHandler: "onTextCopiedHandler", downloadingStepId: "downloadingStepId", step: "step", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", iterationData: "iterationData" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n \n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Loop Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n <!-- Iteration Selector -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations !== undefined)\">\n <label>Iteration</label>\n <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n <!-- Status indicator for selected iteration -->\n <div *ngIf=\"selectedIteration && config?.iterations && config?.iterations?.length > 0\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n </div>\n <select\n class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n [(ngModel)]=\"selectedIteration\"\n (ngModelChange)=\"handleIterationChange($event)\"\n [compareWith]=\"compareIteration\"\n [disabled]=\"(isLive && (status === 'running' || status === 'RUNNING'))\">\n <option *ngIf=\"!config?.iterations || config?.iterations?.length === 0\" value=\"\" disabled>\n No iterations available\n </option>\n <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n {{ getIterationLabel(iteration) }}\n </option>\n </select>\n <!-- Dropdown arrow -->\n <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <span class=\"cqa-ml-auto\" *ngIf=\"config?.iterations && config?.iterations?.length > 0\">\n Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n </span>\n </div>\n\n <!-- Selected Iteration Sub-steps -->\n <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of selectedIteration.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Failure -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Pending -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Running - Show spinner -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"subStep?.status?.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n {{ subStep.description }}\n </span>\n\n <!-- Sub-step Duration -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n\n <!-- Nested Steps -->\n <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1 cqa-nested-steps-container\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n <!-- Loading indicator when nested steps are being loaded -->\n <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\" \n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n </div>\n <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n <!-- Wrapper to show skeleton while step-renderer is loading -->\n <div\n class=\"cqa-step-renderer-wrapper\"\n [attr.id]=\"'exc-' + step.id\"\n [class.loaded]=\"!isNestedStepLoading(step)\">\n <!-- Loading skeleton overlay -->\n <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n </div> -->\n <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n <cqa-step-renderer \n [step]=\"step\"\n [stepNumber]=\"stepNumber + '.' + (i + 1)\"\n [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n [formatActionsHandler]=\"formatActionsHandler\"\n [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [onStepClickHandler]=\"onStepClickHandler\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [onDownloadHandler]=\"onDownloadHandler\"\n [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n [onTextCopiedHandler]=\"onTextCopiedHandler\"\n [downloadingStepId]=\"downloadingStepId\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [selectedIterationId]=\"step?.selectedIterationId || ''\"\n [isLive]=\"isLive\"\n (componentReady)=\"markStepLoaded(step)\">\n </cqa-step-renderer>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n View all iterations\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "getSelfHealLoadingStatesHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "onDownloadHandler", "onFilePathCopiedHandler", "onTextCopiedHandler", "downloadingStepId", "isLive", "stepNumber"], outputs: ["componentReady"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
8788
8790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, decorators: [{
|
|
8789
8791
|
type: Component,
|
|
8790
8792
|
args: [{ selector: 'cqa-loop-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n \n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Loop Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n <!-- Iteration Selector -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations !== undefined)\">\n <label>Iteration</label>\n <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n <!-- Status indicator for selected iteration -->\n <div *ngIf=\"selectedIteration && config?.iterations && config?.iterations?.length > 0\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n </div>\n <select\n class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n [(ngModel)]=\"selectedIteration\"\n (ngModelChange)=\"handleIterationChange($event)\"\n [compareWith]=\"compareIteration\"\n [disabled]=\"(isLive && (status === 'running' || status === 'RUNNING'))\">\n <option *ngIf=\"!config?.iterations || config?.iterations?.length === 0\" value=\"\" disabled>\n No iterations available\n </option>\n <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n {{ getIterationLabel(iteration) }}\n </option>\n </select>\n <!-- Dropdown arrow -->\n <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <span class=\"cqa-ml-auto\" *ngIf=\"config?.iterations && config?.iterations?.length > 0\">\n Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n </span>\n </div>\n\n <!-- Selected Iteration Sub-steps -->\n <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of selectedIteration.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Failure -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Pending -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Running - Show spinner -->\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"subStep?.status?.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n {{ subStep.description }}\n </span>\n\n <!-- Sub-step Duration -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n\n <!-- Nested Steps -->\n <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1 cqa-nested-steps-container\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n <!-- Loading indicator when nested steps are being loaded -->\n <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\" \n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n </div>\n <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n <!-- Wrapper to show skeleton while step-renderer is loading -->\n <div\n class=\"cqa-step-renderer-wrapper\"\n [attr.id]=\"'exc-' + step.id\"\n [class.loaded]=\"!isNestedStepLoading(step)\">\n <!-- Loading skeleton overlay -->\n <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n </div> -->\n <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n <cqa-step-renderer \n [step]=\"step\"\n [stepNumber]=\"stepNumber + '.' + (i + 1)\"\n [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n [formatActionsHandler]=\"formatActionsHandler\"\n [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [onStepClickHandler]=\"onStepClickHandler\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [onDownloadHandler]=\"onDownloadHandler\"\n [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n [onTextCopiedHandler]=\"onTextCopiedHandler\"\n [downloadingStepId]=\"downloadingStepId\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [selectedIterationId]=\"step?.selectedIterationId || ''\"\n [isLive]=\"isLive\"\n (componentReady)=\"markStepLoaded(step)\">\n </cqa-step-renderer>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n View all iterations\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n" }]
|
|
@@ -10334,7 +10336,7 @@ class FileDownloadStepComponent extends BaseStepComponent {
|
|
|
10334
10336
|
}
|
|
10335
10337
|
}
|
|
10336
10338
|
FileDownloadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
10337
|
-
FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded", stepDeleted: "stepDeleted", isDownloading: "isDownloading" }, outputs: { download: "download", filePathCopied: "filePathCopied", textCopied: "textCopied" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n [disabled]=\"isDownloading\"\n (click)=\"onDownload(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <mat-spinner *ngIf=\"isDownloading\" diameter=\"14\" style=\"display: inline-block;\"></mat-spinner>\n <svg *ngIf=\"!isDownloading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n {{ isDownloading ? 'Downloading...' : 'Download' }}\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <div class=\"cqa-relative\">\n <button class=\"cqa-px-1.5 cqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- Copied Tooltip -->\n <div\n *ngIf=\"showFilePathCopied\"\n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", components: [{ type: i1$6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
10339
|
+
FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded", stepDeleted: "stepDeleted", isDownloading: "isDownloading" }, outputs: { download: "download", filePathCopied: "filePathCopied", textCopied: "textCopied" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n [disabled]=\"isDownloading\"\n (click)=\"onDownload(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <mat-spinner *ngIf=\"isDownloading\" diameter=\"14\" style=\"display: inline-block;\"></mat-spinner>\n <svg *ngIf=\"!isDownloading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n {{ isDownloading ? 'Downloading...' : 'Download' }}\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <div class=\"cqa-relative\">\n <button class=\"cqa-px-1.5 cqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- Copied Tooltip -->\n <div\n *ngIf=\"showFilePathCopied\"\n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", components: [{ type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
10338
10340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, decorators: [{
|
|
10339
10341
|
type: Component,
|
|
10340
10342
|
args: [{ selector: 'cqa-file-download-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n [disabled]=\"isDownloading\"\n (click)=\"onDownload(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <mat-spinner *ngIf=\"isDownloading\" diameter=\"14\" style=\"display: inline-block;\"></mat-spinner>\n <svg *ngIf=\"!isDownloading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n {{ isDownloading ? 'Downloading...' : 'Download' }}\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <div class=\"cqa-relative\">\n <button class=\"cqa-px-1.5 cqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- Copied Tooltip -->\n <div\n *ngIf=\"showFilePathCopied\"\n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", styles: [] }]
|
|
@@ -10536,7 +10538,7 @@ class LiveExecutionStepComponent extends BaseStepComponent {
|
|
|
10536
10538
|
}
|
|
10537
10539
|
}
|
|
10538
10540
|
LiveExecutionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
10539
|
-
LiveExecutionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveExecutionStepComponent, selector: "cqa-live-execution-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", expanded: "expanded", subSteps: "subSteps", stepDeleted: "stepDeleted" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running - Show spinner -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <!-- Skipped -->\n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\">\n <!-- Sub-steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n <div\n *ngFor=\"let subStep of subSteps; trackBy: trackBySubStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon or Loader -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n <!-- Loader when running -->\n <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n \n <!-- Success Icon when complete -->\n <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n <ngx-typed-js \n *ngIf=\"subStep.isRunning && subStep.text\"\n [strings]=\"[subStep.text]\"\n [typeSpeed]=\"30\"\n [showCursor]=\"false\"\n [fadeOut]=\"false\">\n <span class=\"typing\"></span>\n </ngx-typed-js>\n <span *ngIf=\"!subStep.isRunning\">{{ subStep.text }}</span>\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n {{ formatDuration(subStep.duration || 0) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1$
|
|
10541
|
+
LiveExecutionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveExecutionStepComponent, selector: "cqa-live-execution-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", expanded: "expanded", subSteps: "subSteps", stepDeleted: "stepDeleted" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running - Show spinner -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <!-- Skipped -->\n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\">\n <!-- Sub-steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n <div\n *ngFor=\"let subStep of subSteps; trackBy: trackBySubStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon or Loader -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n <!-- Loader when running -->\n <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n \n <!-- Success Icon when complete -->\n <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n <ngx-typed-js \n *ngIf=\"subStep.isRunning && subStep.text\"\n [strings]=\"[subStep.text]\"\n [typeSpeed]=\"30\"\n [showCursor]=\"false\"\n [fadeOut]=\"false\">\n <span class=\"typing\"></span>\n </ngx-typed-js>\n <span *ngIf=\"!subStep.isRunning\">{{ subStep.text }}</span>\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n {{ formatDuration(subStep.duration || 0) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1$6.NgxTypedJsComponent, selector: "ngx-typed-js", inputs: ["cursorColor", "strings", "stringsElement", "typeSpeed", "startDelay", "backSpeed", "smartBackspace", "shuffle", "backDelay", "fadeOut", "fadeOutClass", "fadeOutDelay", "loop", "loopCount", "showCursor", "cursorChar", "autoInsertCss", "attr", "bindInputFocusEvents", "contentType"], outputs: ["completed", "preStringTyped", "stringTyped", "lastStringBackspaced", "typingPaused", "typingResumed", "reset", "stopped", "started", "destroyed"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
10540
10542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, decorators: [{
|
|
10541
10543
|
type: Component,
|
|
10542
10544
|
args: [{ selector: 'cqa-live-execution-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running - Show spinner -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <!-- Skipped -->\n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\">\n <!-- Sub-steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n <div\n *ngFor=\"let subStep of subSteps; trackBy: trackBySubStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon or Loader -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n <!-- Loader when running -->\n <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" 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\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n \n <!-- Success Icon when complete -->\n <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n <ngx-typed-js \n *ngIf=\"subStep.isRunning && subStep.text\"\n [strings]=\"[subStep.text]\"\n [typeSpeed]=\"30\"\n [showCursor]=\"false\"\n [fadeOut]=\"false\">\n <span class=\"typing\"></span>\n </ngx-typed-js>\n <span *ngIf=\"!subStep.isRunning\">{{ subStep.text }}</span>\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n {{ formatDuration(subStep.duration || 0) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -11192,12 +11194,12 @@ class SimulatorComponent {
|
|
|
11192
11194
|
this.attachVideoListeners();
|
|
11193
11195
|
}
|
|
11194
11196
|
}
|
|
11195
|
-
SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$
|
|
11196
|
-
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n matTooltipPosition=\"below\"\n >\n \u00B7\n <span class=\"cqa-ml-1\">\n {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n </span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n <p class=\"cqa-text-sm cqa-text-gray-600\">\n {{ vncSessionIntupptedMessage }}\n </p>\n </ng-container>\n <ng-template #noVideoDefault>\n <span>No video recording found</span>\n </ng-template>\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: i1$6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
11197
|
+
SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
11198
|
+
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n matTooltipPosition=\"below\"\n >\n \u00B7\n <span class=\"cqa-ml-1\">\n {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n </span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n <p class=\"cqa-text-sm cqa-text-gray-600\">\n {{ vncSessionIntupptedMessage }}\n </p>\n </ng-container>\n <ng-template #noVideoDefault>\n <span>No video recording found</span>\n </ng-template>\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
11197
11199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
|
|
11198
11200
|
type: Component,
|
|
11199
11201
|
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n matTooltipPosition=\"below\"\n >\n \u00B7\n <span class=\"cqa-ml-1\">\n {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n </span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n <p class=\"cqa-text-sm cqa-text-gray-600\">\n {{ vncSessionIntupptedMessage }}\n </p>\n </ng-container>\n <ng-template #noVideoDefault>\n <span>No video recording found</span>\n </ng-template>\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", styles: [] }]
|
|
11200
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
11202
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoUrl: [{
|
|
11201
11203
|
type: Input
|
|
11202
11204
|
}], videoUrls: [{
|
|
11203
11205
|
type: Input
|
|
@@ -12110,12 +12112,12 @@ class CompareRunsComponent {
|
|
|
12110
12112
|
return labels[this.selectedRunB.result] || this.selectedRunB.result;
|
|
12111
12113
|
}
|
|
12112
12114
|
}
|
|
12113
|
-
CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token:
|
|
12115
|
+
CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i2$2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
12114
12116
|
CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <!-- Timing Changed summary removed -->\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 450px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12115
12117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
|
|
12116
12118
|
type: Component,
|
|
12117
12119
|
args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <!-- Timing Changed summary removed -->\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 450px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
|
|
12118
|
-
}], ctorParameters: function () { return [{ type:
|
|
12120
|
+
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
|
|
12119
12121
|
type: Input
|
|
12120
12122
|
}], comparisonData: [{
|
|
12121
12123
|
type: Input
|
|
@@ -13485,6 +13487,7 @@ class TestCaseNormalStepComponent {
|
|
|
13485
13487
|
this.disabled = false;
|
|
13486
13488
|
this.isNested = false;
|
|
13487
13489
|
this.isInsideLoop = false;
|
|
13490
|
+
this.isReorder = false;
|
|
13488
13491
|
this.eventTypeChange = new EventEmitter();
|
|
13489
13492
|
this.parameterChange = new EventEmitter();
|
|
13490
13493
|
this.edit = new EventEmitter();
|
|
@@ -13631,10 +13634,10 @@ class TestCaseNormalStepComponent {
|
|
|
13631
13634
|
}
|
|
13632
13635
|
}
|
|
13633
13636
|
TestCaseNormalStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13634
|
-
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", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], 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 <label 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 [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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=\"#432DD7\"\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=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" 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=\"#8200DB\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" 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=\"#1447E6\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\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=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n\n <!-- Label -->\n <span 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 T\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 === '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>{{ 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]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span>\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Navigate: URL input -->\n <input *ngIf=\"eventType === 'navigate'\" type=\"text\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"https://example.com\"\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] focus:!cqa-outline-none\" />\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' && 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 <!-- 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 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 <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 -->\n <span *ngIf=\"eventType === 'custom'\"\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 <!-- 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 </div>\n\n <!-- AI Agent View Details Link -->\n <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto 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 <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto 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\">\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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
13637
|
+
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", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], 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 [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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=\"#432DD7\"\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=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" 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=\"#8200DB\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" 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=\"#1447E6\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\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=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n\n <!-- Label -->\n <span 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 T\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 === '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>{{ 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]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span>\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Navigate: URL input -->\n <input *ngIf=\"eventType === 'navigate'\" type=\"text\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"https://example.com\"\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] focus:!cqa-outline-none\" />\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' && 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 <!-- 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 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 <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 -->\n <span *ngIf=\"eventType === 'custom'\"\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 <!-- 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 </div>\n\n <!-- AI Agent View Details Link -->\n <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto 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 <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto 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\">\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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
13635
13638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
|
|
13636
13639
|
type: Component,
|
|
13637
|
-
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 <label 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 [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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=\"#432DD7\"\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=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" 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=\"#8200DB\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" 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=\"#1447E6\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\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=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n\n <!-- Label -->\n <span 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 T\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 === '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>{{ 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]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span>\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Navigate: URL input -->\n <input *ngIf=\"eventType === 'navigate'\" type=\"text\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"https://example.com\"\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] focus:!cqa-outline-none\" />\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' && 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 <!-- 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 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 <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 -->\n <span *ngIf=\"eventType === 'custom'\"\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 <!-- 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 </div>\n\n <!-- AI Agent View Details Link -->\n <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto 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 <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto 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\">\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>" }]
|
|
13640
|
+
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 [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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=\"#432DD7\"\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=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" 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=\"#8200DB\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" 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=\"#1447E6\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\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=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n\n <!-- Label -->\n <span 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 T\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 === '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>{{ 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]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span>\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Navigate: URL input -->\n <input *ngIf=\"eventType === 'navigate'\" type=\"text\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"https://example.com\"\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] focus:!cqa-outline-none\" />\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' && 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 <!-- 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 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 <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 -->\n <span *ngIf=\"eventType === 'custom'\"\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 <!-- 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 </div>\n\n <!-- AI Agent View Details Link -->\n <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto 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 <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto 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\">\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>" }]
|
|
13638
13641
|
}], propDecorators: { dropdownContainer: [{
|
|
13639
13642
|
type: ViewChild,
|
|
13640
13643
|
args: ['dropdownContainer', { static: false }]
|
|
@@ -13654,6 +13657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
13654
13657
|
type: Input
|
|
13655
13658
|
}], isInsideLoop: [{
|
|
13656
13659
|
type: Input
|
|
13660
|
+
}], isReorder: [{
|
|
13661
|
+
type: Input
|
|
13657
13662
|
}], eventTypeChange: [{
|
|
13658
13663
|
type: Output
|
|
13659
13664
|
}], parameterChange: [{
|
|
@@ -13734,6 +13739,8 @@ class TestCaseDetailsRendererComponent {
|
|
|
13734
13739
|
this.cdr = cdr;
|
|
13735
13740
|
this.isNested = false;
|
|
13736
13741
|
this.isInsideLoop = false;
|
|
13742
|
+
/** When true, enables drag-and-drop reordering and shows drag handle icon instead of checkbox */
|
|
13743
|
+
this.isReorder = false;
|
|
13737
13744
|
this.nestedStepChange = new EventEmitter();
|
|
13738
13745
|
this.addStep = new EventEmitter();
|
|
13739
13746
|
this.deleteStep = new EventEmitter();
|
|
@@ -13760,13 +13767,15 @@ class TestCaseDetailsRendererComponent {
|
|
|
13760
13767
|
this.maxIterationsChange = new EventEmitter();
|
|
13761
13768
|
this.eventTypeChange = new EventEmitter();
|
|
13762
13769
|
this.parameterChange = new EventEmitter();
|
|
13770
|
+
/** Emitted when a step is dropped in a nested dropzone (step-group, loop, condition). Payload: { event, targetList }. */
|
|
13771
|
+
this.dndDropInZone = new EventEmitter();
|
|
13763
13772
|
this.componentRef = null;
|
|
13764
13773
|
}
|
|
13765
13774
|
ngAfterViewInit() {
|
|
13766
13775
|
this.renderStep();
|
|
13767
13776
|
}
|
|
13768
13777
|
ngOnChanges(changes) {
|
|
13769
|
-
if (changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop']) {
|
|
13778
|
+
if (changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop'] || changes['isReorder']) {
|
|
13770
13779
|
this.renderStep();
|
|
13771
13780
|
}
|
|
13772
13781
|
}
|
|
@@ -13806,6 +13815,7 @@ class TestCaseDetailsRendererComponent {
|
|
|
13806
13815
|
instance.stepNumber = this.step.stepNumber;
|
|
13807
13816
|
instance.isNested = this.isNested;
|
|
13808
13817
|
instance.isInsideLoop = this.isInsideLoop;
|
|
13818
|
+
instance.isReorder = this.isReorder;
|
|
13809
13819
|
Object.keys(this.step).forEach((key) => {
|
|
13810
13820
|
if (key !== 'stepType' && key !== 'nestedSteps' && key !== 'branches') {
|
|
13811
13821
|
instance[key] = this.step[key];
|
|
@@ -13871,10 +13881,11 @@ class TestCaseDetailsRendererComponent {
|
|
|
13871
13881
|
wire('maxIterationsChange', this.maxIterationsChange);
|
|
13872
13882
|
wire('eventTypeChange', this.eventTypeChange);
|
|
13873
13883
|
wire('parameterChange', this.parameterChange);
|
|
13884
|
+
wire('dndDropInZone', this.dndDropInZone);
|
|
13874
13885
|
}
|
|
13875
13886
|
}
|
|
13876
13887
|
TestCaseDetailsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, deps: [{ token: TEST_CASE_STEP_COMPONENT_MAP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
13877
|
-
TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", branch: "branch" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative\">\n <ng-container #stepHost></ng-container>\n <button class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-hidden\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\"/><rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\"/><path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n</div>" });
|
|
13888
|
+
TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", branch: "branch", isReorder: "isReorder" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", dndDropInZone: "dndDropInZone" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative\">\n <ng-container #stepHost></ng-container>\n <button class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-hidden\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\"/><rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\"/><path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n</div>" });
|
|
13878
13889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, decorators: [{
|
|
13879
13890
|
type: Component,
|
|
13880
13891
|
args: [{ selector: 'cqa-test-case-details-renderer', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-relative\">\n <ng-container #stepHost></ng-container>\n <button class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-hidden\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\"/><rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\"/><path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n</div>" }]
|
|
@@ -13894,6 +13905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
13894
13905
|
type: Input
|
|
13895
13906
|
}], branch: [{
|
|
13896
13907
|
type: Input
|
|
13908
|
+
}], isReorder: [{
|
|
13909
|
+
type: Input
|
|
13897
13910
|
}], nestedStepChange: [{
|
|
13898
13911
|
type: Output
|
|
13899
13912
|
}], addStep: [{
|
|
@@ -13946,6 +13959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
13946
13959
|
type: Output
|
|
13947
13960
|
}], parameterChange: [{
|
|
13948
13961
|
type: Output
|
|
13962
|
+
}], dndDropInZone: [{
|
|
13963
|
+
type: Output
|
|
13949
13964
|
}] } });
|
|
13950
13965
|
|
|
13951
13966
|
class TestCaseLoopStepComponent {
|
|
@@ -13955,6 +13970,7 @@ class TestCaseLoopStepComponent {
|
|
|
13955
13970
|
this.expanded = true;
|
|
13956
13971
|
this.isNested = false;
|
|
13957
13972
|
this.isInsideLoop = false;
|
|
13973
|
+
this.isReorder = false;
|
|
13958
13974
|
this.toggleExpanded = new EventEmitter();
|
|
13959
13975
|
this.testDataProfileChange = new EventEmitter();
|
|
13960
13976
|
this.startStepChange = new EventEmitter();
|
|
@@ -13968,6 +13984,7 @@ class TestCaseLoopStepComponent {
|
|
|
13968
13984
|
this.delete = new EventEmitter();
|
|
13969
13985
|
this.moreOptions = new EventEmitter();
|
|
13970
13986
|
this.edit = new EventEmitter();
|
|
13987
|
+
this.dndDropInZone = new EventEmitter();
|
|
13971
13988
|
/** Expose global constructors for template (Angular templates don't have String/Number) */
|
|
13972
13989
|
this.stringFn = String;
|
|
13973
13990
|
this.numberFn = Number;
|
|
@@ -13978,6 +13995,9 @@ class TestCaseLoopStepComponent {
|
|
|
13978
13995
|
/** Local copy of values while editing (for Cancel revert) */
|
|
13979
13996
|
this.editSnapshot = {};
|
|
13980
13997
|
}
|
|
13998
|
+
onDndDrop(event) {
|
|
13999
|
+
this.dndDropInZone.emit({ event, targetList: this.nestedSteps });
|
|
14000
|
+
}
|
|
13981
14001
|
ngOnInit() {
|
|
13982
14002
|
if (this.config) {
|
|
13983
14003
|
this.id = this.config.id;
|
|
@@ -14207,12 +14227,12 @@ class TestCaseLoopStepComponent {
|
|
|
14207
14227
|
this.moreOptions.emit();
|
|
14208
14228
|
}
|
|
14209
14229
|
}
|
|
14210
|
-
TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token:
|
|
14211
|
-
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" }, 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", edit: "edit" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-custom-input [value]=\"editForm.get('testDataProfile')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('testDataProfile', $event)\" placeholder=\"Testdataprofile\"\n class=\"cqa-w-full cqa-max-w-[216px]\" size=\"sm\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit -->\n <ng-container *ngIf=\"loopType === 'while'\">\n <cqa-custom-input [value]=\"editForm.get('condition')?.value ?? ''\" class=\"cqa-w-full cqa-max-w-[216px]\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\" placeholder='element \".selector\" exists' size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">(max</span>\n <cqa-custom-input type=\"number\" class=\"cqa-w-full cqa-max-w-[216px]\"\n [value]=\"editForm.get('maxIterations')?.value != null ? stringFn(editForm.get('maxIterations')?.value) : ''\"\n (valueChange)=\"onEditFormFieldChange('maxIterations', ($event !== '' && $event != null) ? numberFn($event) : 5)\"\n placeholder=\"5\" size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">iterations)</span>\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Controls -->\n <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Test Data profile\n </button>\n\n <!-- Start Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Start\n </button>\n\n <!-- End Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n End\n </button>\n </div>\n\n <!-- While Loop Condition -->\n <div *ngIf=\"loopType === 'while'\" 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\">{{ condition || 'element \".notification-badge\" exists' }}</span>\n <span class=\"cqa-text-gray-700 cqa-text-sm\">(max {{ maxIterations ?? 5 }} iterations)</span>\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\">\n </cqa-test-case-details-renderer>\n </div>\n\n <!-- END Marker -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
14230
|
+
TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
14231
|
+
TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, 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", edit: "edit", dndDropInZone: "dndDropInZone" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-custom-input [value]=\"editForm.get('testDataProfile')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('testDataProfile', $event)\" placeholder=\"Testdataprofile\"\n class=\"cqa-w-full cqa-max-w-[216px]\" size=\"sm\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit -->\n <ng-container *ngIf=\"loopType === 'while'\">\n <cqa-custom-input [value]=\"editForm.get('condition')?.value ?? ''\" class=\"cqa-w-full cqa-max-w-[216px]\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\" placeholder='element \".selector\" exists' size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">(max</span>\n <cqa-custom-input type=\"number\" class=\"cqa-w-full cqa-max-w-[216px]\"\n [value]=\"editForm.get('maxIterations')?.value != null ? stringFn(editForm.get('maxIterations')?.value) : ''\"\n (valueChange)=\"onEditFormFieldChange('maxIterations', ($event !== '' && $event != null) ? numberFn($event) : 5)\"\n placeholder=\"5\" size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">iterations)</span>\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Controls -->\n <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Test Data profile\n </button>\n\n <!-- Start Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Start\n </button>\n\n <!-- End Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n End\n </button>\n </div>\n\n <!-- While Loop Condition -->\n <div *ngIf=\"loopType === 'while'\" 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\">{{ condition || 'element \".notification-badge\" exists' }}</span>\n <span class=\"cqa-text-gray-700 cqa-text-sm\">(max {{ maxIterations ?? 5 }} iterations)</span>\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\" (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END Marker -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "dndDropInZone"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i7.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i7.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
|
|
14212
14232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
|
|
14213
14233
|
type: Component,
|
|
14214
|
-
args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-custom-input [value]=\"editForm.get('testDataProfile')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('testDataProfile', $event)\" placeholder=\"Testdataprofile\"\n class=\"cqa-w-full cqa-max-w-[216px]\" size=\"sm\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit -->\n <ng-container *ngIf=\"loopType === 'while'\">\n <cqa-custom-input [value]=\"editForm.get('condition')?.value ?? ''\" class=\"cqa-w-full cqa-max-w-[216px]\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\" placeholder='element \".selector\" exists' size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">(max</span>\n <cqa-custom-input type=\"number\" class=\"cqa-w-full cqa-max-w-[216px]\"\n [value]=\"editForm.get('maxIterations')?.value != null ? stringFn(editForm.get('maxIterations')?.value) : ''\"\n (valueChange)=\"onEditFormFieldChange('maxIterations', ($event !== '' && $event != null) ? numberFn($event) : 5)\"\n placeholder=\"5\" size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">iterations)</span>\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Controls -->\n <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Test Data profile\n </button>\n\n <!-- Start Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Start\n </button>\n\n <!-- End Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n End\n </button>\n </div>\n\n <!-- While Loop Condition -->\n <div *ngIf=\"loopType === 'while'\" 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\">{{ condition || 'element \".notification-badge\" exists' }}</span>\n <span class=\"cqa-text-gray-700 cqa-text-sm\">(max {{ maxIterations ?? 5 }} iterations)</span>\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\">\n </cqa-test-case-details-renderer>\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>" }]
|
|
14215
|
-
}], ctorParameters: function () { return [{ type:
|
|
14234
|
+
args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-custom-input [value]=\"editForm.get('testDataProfile')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('testDataProfile', $event)\" placeholder=\"Testdataprofile\"\n class=\"cqa-w-full cqa-max-w-[216px]\" size=\"sm\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit -->\n <ng-container *ngIf=\"loopType === 'while'\">\n <cqa-custom-input [value]=\"editForm.get('condition')?.value ?? ''\" class=\"cqa-w-full cqa-max-w-[216px]\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\" placeholder='element \".selector\" exists' size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">(max</span>\n <cqa-custom-input type=\"number\" class=\"cqa-w-full cqa-max-w-[216px]\"\n [value]=\"editForm.get('maxIterations')?.value != null ? stringFn(editForm.get('maxIterations')?.value) : ''\"\n (valueChange)=\"onEditFormFieldChange('maxIterations', ($event !== '' && $event != null) ? numberFn($event) : 5)\"\n placeholder=\"5\" size=\"sm\">\n </cqa-custom-input>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">iterations)</span>\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Controls -->\n <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Test Data profile\n </button>\n\n <!-- Start Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n Start\n </button>\n\n <!-- End Button -->\n <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n End\n </button>\n </div>\n\n <!-- While Loop Condition -->\n <div *ngIf=\"loopType === 'while'\" 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\">{{ condition || 'element \".notification-badge\" exists' }}</span>\n <span class=\"cqa-text-gray-700 cqa-text-sm\">(max {{ maxIterations ?? 5 }} iterations)</span>\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\" (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END Marker -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>" }]
|
|
14235
|
+
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { config: [{
|
|
14216
14236
|
type: Input
|
|
14217
14237
|
}], id: [{
|
|
14218
14238
|
type: Input
|
|
@@ -14238,6 +14258,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14238
14258
|
type: Input
|
|
14239
14259
|
}], isInsideLoop: [{
|
|
14240
14260
|
type: Input
|
|
14261
|
+
}], isReorder: [{
|
|
14262
|
+
type: Input
|
|
14241
14263
|
}], toggleExpanded: [{
|
|
14242
14264
|
type: Output
|
|
14243
14265
|
}], testDataProfileChange: [{
|
|
@@ -14264,6 +14286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14264
14286
|
type: Output
|
|
14265
14287
|
}], edit: [{
|
|
14266
14288
|
type: Output
|
|
14289
|
+
}], dndDropInZone: [{
|
|
14290
|
+
type: Output
|
|
14267
14291
|
}] } });
|
|
14268
14292
|
|
|
14269
14293
|
class TestCaseConditionStepComponent {
|
|
@@ -14273,6 +14297,7 @@ class TestCaseConditionStepComponent {
|
|
|
14273
14297
|
this.expanded = true;
|
|
14274
14298
|
this.isNested = false;
|
|
14275
14299
|
this.isInsideLoop = false;
|
|
14300
|
+
this.isReorder = false;
|
|
14276
14301
|
/** When true, header shows inline edit form (fields, operator select, Cancel/Apply) */
|
|
14277
14302
|
this.isEditing = false;
|
|
14278
14303
|
/** Snapshot for Cancel revert */
|
|
@@ -14287,6 +14312,10 @@ class TestCaseConditionStepComponent {
|
|
|
14287
14312
|
this.duplicate = new EventEmitter();
|
|
14288
14313
|
this.delete = new EventEmitter();
|
|
14289
14314
|
this.moreOptions = new EventEmitter();
|
|
14315
|
+
this.dndDropInZone = new EventEmitter();
|
|
14316
|
+
}
|
|
14317
|
+
onDndDrop(event, branch) {
|
|
14318
|
+
this.dndDropInZone.emit({ event, targetList: branch.nestedSteps });
|
|
14290
14319
|
}
|
|
14291
14320
|
ngOnInit() {
|
|
14292
14321
|
if (this.config) {
|
|
@@ -14505,12 +14534,12 @@ class TestCaseConditionStepComponent {
|
|
|
14505
14534
|
this.moreOptions.emit();
|
|
14506
14535
|
}
|
|
14507
14536
|
}
|
|
14508
|
-
TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token:
|
|
14509
|
-
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" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-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) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n placeholder=\"Usertype\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\n\n <!-- Operator: dynamic-select (IS, IS NOT, etc.) -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"operatorSelectConfig\" class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n\n <!-- Third field: right operand (e.g. Premium) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionRight')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionRight', $event)\"\n placeholder=\"Premium\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\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 <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5\">\n Add ELSE\n </span>\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 -->\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\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n IF / ELSE\n </span>\n\n <!-- Condition Input -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n <span [innerHTML]=\"condition\"></span>\n <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branch Header -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n {{ getBranchLabel(branch) }}\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onBranchStepChange(branch, step, i)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onBranchStepChange(branch, step, i)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
14537
|
+
TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
14538
|
+
TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", dndDropInZone: "dndDropInZone" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-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) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n placeholder=\"Usertype\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\n\n <!-- Operator: dynamic-select (IS, IS NOT, etc.) -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"operatorSelectConfig\" class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n\n <!-- Third field: right operand (e.g. Premium) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionRight')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionRight', $event)\"\n placeholder=\"Premium\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\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 <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5\">\n Add ELSE\n </span>\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 -->\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\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n IF / ELSE\n </span>\n\n <!-- Condition Input -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n <span [innerHTML]=\"condition\"></span>\n <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branch Header -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n {{ getBranchLabel(branch) }}\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onBranchStepChange(branch, step, i)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onBranchStepChange(branch, step, i)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onBranchStepChange(branch, step, i)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onBranchStepChange(branch, step, i)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "dndDropInZone"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i7.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i7.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
|
|
14510
14539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
|
|
14511
14540
|
type: Component,
|
|
14512
|
-
args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-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) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n placeholder=\"Usertype\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\n\n <!-- Operator: dynamic-select (IS, IS NOT, etc.) -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"operatorSelectConfig\" class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n\n <!-- Third field: right operand (e.g. Premium) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionRight')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionRight', $event)\"\n placeholder=\"Premium\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\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 <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5\">\n Add ELSE\n </span>\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 -->\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\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n IF / ELSE\n </span>\n\n <!-- Condition Input -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n <span [innerHTML]=\"condition\"></span>\n <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branch Header -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n {{ getBranchLabel(branch) }}\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onBranchStepChange(branch, step, i)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onBranchStepChange(branch, step, i)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n >\n </cqa-test-case-details-renderer>\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>" }]
|
|
14513
|
-
}], ctorParameters: function () { return [{ type:
|
|
14541
|
+
args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-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) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n placeholder=\"Usertype\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\n\n <!-- Operator: dynamic-select (IS, IS NOT, etc.) -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"operatorSelectConfig\" class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n\n <!-- Third field: right operand (e.g. Premium) -->\n <cqa-custom-input\n [value]=\"editForm.get('conditionRight')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionRight', $event)\"\n placeholder=\"Premium\"\n class=\"cqa-w-full cqa-max-w-[216px]\"\n size=\"sm\">\n </cqa-custom-input>\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 <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5\">\n Add ELSE\n </span>\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 -->\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\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n IF / ELSE\n </span>\n\n <!-- Condition Input -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n <span [innerHTML]=\"condition\"></span>\n <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branch Header -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n {{ getBranchLabel(branch) }}\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onBranchStepChange(branch, step, i)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onBranchStepChange(branch, step, i)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onBranchStepChange(branch, step, i)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onBranchStepChange(branch, step, i)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>" }]
|
|
14542
|
+
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { config: [{
|
|
14514
14543
|
type: Input
|
|
14515
14544
|
}], id: [{
|
|
14516
14545
|
type: Input
|
|
@@ -14526,6 +14555,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14526
14555
|
type: Input
|
|
14527
14556
|
}], isInsideLoop: [{
|
|
14528
14557
|
type: Input
|
|
14558
|
+
}], isReorder: [{
|
|
14559
|
+
type: Input
|
|
14529
14560
|
}], toggleExpanded: [{
|
|
14530
14561
|
type: Output
|
|
14531
14562
|
}], conditionChange: [{
|
|
@@ -14546,6 +14577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14546
14577
|
type: Output
|
|
14547
14578
|
}], moreOptions: [{
|
|
14548
14579
|
type: Output
|
|
14580
|
+
}], dndDropInZone: [{
|
|
14581
|
+
type: Output
|
|
14549
14582
|
}] } });
|
|
14550
14583
|
|
|
14551
14584
|
class TestCaseStepGroupComponent {
|
|
@@ -14556,6 +14589,7 @@ class TestCaseStepGroupComponent {
|
|
|
14556
14589
|
this.expanded = true;
|
|
14557
14590
|
this.isNested = false;
|
|
14558
14591
|
this.isInsideLoop = false;
|
|
14592
|
+
this.isReorder = false;
|
|
14559
14593
|
this.previousNestedStepsLength = 0;
|
|
14560
14594
|
this.previousNestedStepsReference = null;
|
|
14561
14595
|
this.toggleExpanded = new EventEmitter();
|
|
@@ -14570,6 +14604,10 @@ class TestCaseStepGroupComponent {
|
|
|
14570
14604
|
this.link = new EventEmitter();
|
|
14571
14605
|
this.duplicate = new EventEmitter();
|
|
14572
14606
|
this.delete = new EventEmitter();
|
|
14607
|
+
this.dndDropInZone = new EventEmitter();
|
|
14608
|
+
}
|
|
14609
|
+
onDndDrop(event) {
|
|
14610
|
+
this.dndDropInZone.emit({ event, targetList: this.nestedSteps });
|
|
14573
14611
|
}
|
|
14574
14612
|
ngOnInit() {
|
|
14575
14613
|
this.updateFromConfig();
|
|
@@ -14739,10 +14777,10 @@ class TestCaseStepGroupComponent {
|
|
|
14739
14777
|
}
|
|
14740
14778
|
}
|
|
14741
14779
|
TestCaseStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
14742
|
-
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" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n <!-- Step Group Header -->\n <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary -->\n <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button>\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [isNested]=\"true\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedStepChange(step, i)\"\n (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n >\n </cqa-test-case-details-renderer>\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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
14780
|
+
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" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", dndDropInZone: "dndDropInZone" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n <!-- Step Group Header -->\n <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary -->\n <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button>\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedStepChange(step, i)\"\n (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedStepChange(step, i)\"\n (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "dndDropInZone"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i7.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i7.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
|
|
14743
14781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, decorators: [{
|
|
14744
14782
|
type: Component,
|
|
14745
|
-
args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n <!-- Step Group Header -->\n <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary -->\n <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button>\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [isNested]=\"true\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedStepChange(step, i)\"\n (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n >\n </cqa-test-case-details-renderer>\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>" }]
|
|
14783
|
+
args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n <!-- Step Group Header -->\n <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary -->\n <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button>\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedStepChange(step, i)\"\n (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedStepChange(step, i)\"\n (delete)=\"onDeleteStep(i)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (dndDropInZone)=\"dndDropInZone.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>" }]
|
|
14746
14784
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
14747
14785
|
type: Input
|
|
14748
14786
|
}], id: [{
|
|
@@ -14763,6 +14801,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14763
14801
|
type: Input
|
|
14764
14802
|
}], isInsideLoop: [{
|
|
14765
14803
|
type: Input
|
|
14804
|
+
}], isReorder: [{
|
|
14805
|
+
type: Input
|
|
14766
14806
|
}], toggleExpanded: [{
|
|
14767
14807
|
type: Output
|
|
14768
14808
|
}], groupNameChange: [{
|
|
@@ -14787,6 +14827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14787
14827
|
type: Output
|
|
14788
14828
|
}], delete: [{
|
|
14789
14829
|
type: Output
|
|
14830
|
+
}], dndDropInZone: [{
|
|
14831
|
+
type: Output
|
|
14790
14832
|
}] } });
|
|
14791
14833
|
|
|
14792
14834
|
class TestCaseApiStepComponent {
|
|
@@ -14798,6 +14840,7 @@ class TestCaseApiStepComponent {
|
|
|
14798
14840
|
this.isNested = false;
|
|
14799
14841
|
this.isInsideLoop = false;
|
|
14800
14842
|
this.expanded = false;
|
|
14843
|
+
this.isReorder = false;
|
|
14801
14844
|
this.edit = new EventEmitter();
|
|
14802
14845
|
this.link = new EventEmitter();
|
|
14803
14846
|
this.duplicate = new EventEmitter();
|
|
@@ -14841,10 +14884,10 @@ class TestCaseApiStepComponent {
|
|
|
14841
14884
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
14842
14885
|
}
|
|
14843
14886
|
TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14844
|
-
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", expanded: "expanded" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded" }, 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 <label 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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">API</span>\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 href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
14887
|
+
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", expanded: "expanded", isReorder: "isReorder" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded" }, 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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">API</span>\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 href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
14845
14888
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, decorators: [{
|
|
14846
14889
|
type: Component,
|
|
14847
|
-
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 <label 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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">API</span>\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 href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>" }]
|
|
14890
|
+
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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">API</span>\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 href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>" }]
|
|
14848
14891
|
}], propDecorators: { config: [{
|
|
14849
14892
|
type: Input
|
|
14850
14893
|
}], stepNumber: [{
|
|
@@ -14873,6 +14916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14873
14916
|
type: Input
|
|
14874
14917
|
}], expanded: [{
|
|
14875
14918
|
type: Input
|
|
14919
|
+
}], isReorder: [{
|
|
14920
|
+
type: Input
|
|
14876
14921
|
}], edit: [{
|
|
14877
14922
|
type: Output
|
|
14878
14923
|
}], link: [{
|
|
@@ -14899,6 +14944,7 @@ class TestCaseDatabaseStepComponent {
|
|
|
14899
14944
|
this.isNested = false;
|
|
14900
14945
|
this.isInsideLoop = false;
|
|
14901
14946
|
this.expanded = false;
|
|
14947
|
+
this.isReorder = false;
|
|
14902
14948
|
this.edit = new EventEmitter();
|
|
14903
14949
|
this.link = new EventEmitter();
|
|
14904
14950
|
this.duplicate = new EventEmitter();
|
|
@@ -14933,10 +14979,10 @@ class TestCaseDatabaseStepComponent {
|
|
|
14933
14979
|
onQueryChange(value) { this.query = value; this.queryChange.emit(value); }
|
|
14934
14980
|
}
|
|
14935
14981
|
TestCaseDatabaseStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14936
|
-
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", isInsideLoop: "isInsideLoop", expanded: "expanded" }, outputs: { edit: "edit", 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 <label 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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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\"><ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><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\"/><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\"/></svg> -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Database</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
14982
|
+
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", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder" }, outputs: { edit: "edit", 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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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\"><ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><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\"/><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\"/></svg> -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Database</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
14937
14983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, decorators: [{
|
|
14938
14984
|
type: Component,
|
|
14939
|
-
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 <label 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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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\"><ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><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\"/><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\"/></svg> -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Database</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>" }]
|
|
14985
|
+
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\n class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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\"><ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><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\"/><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\"/></svg> -->\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Database</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\"\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=\"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>" }]
|
|
14940
14986
|
}], propDecorators: { config: [{
|
|
14941
14987
|
type: Input
|
|
14942
14988
|
}], stepNumber: [{
|
|
@@ -14961,6 +15007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14961
15007
|
type: Input
|
|
14962
15008
|
}], expanded: [{
|
|
14963
15009
|
type: Input
|
|
15010
|
+
}], isReorder: [{
|
|
15011
|
+
type: Input
|
|
14964
15012
|
}], edit: [{
|
|
14965
15013
|
type: Output
|
|
14966
15014
|
}], link: [{
|
|
@@ -14988,6 +15036,7 @@ class TestCaseAiAgentStepComponent {
|
|
|
14988
15036
|
this.disabled = false;
|
|
14989
15037
|
this.isNested = false;
|
|
14990
15038
|
this.isInsideLoop = false;
|
|
15039
|
+
this.isReorder = false;
|
|
14991
15040
|
this.edit = new EventEmitter();
|
|
14992
15041
|
this.link = new EventEmitter();
|
|
14993
15042
|
this.duplicate = new EventEmitter();
|
|
@@ -15014,10 +15063,10 @@ class TestCaseAiAgentStepComponent {
|
|
|
15014
15063
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
15015
15064
|
}
|
|
15016
15065
|
TestCaseAiAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15017
|
-
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", isInsideLoop: "isInsideLoop" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">AI Agent</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ 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"] }] });
|
|
15066
|
+
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", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">AI Agent</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
15018
15067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, decorators: [{
|
|
15019
15068
|
type: Component,
|
|
15020
|
-
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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">AI Agent</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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" }]
|
|
15069
|
+
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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">AI Agent</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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" }]
|
|
15021
15070
|
}], propDecorators: { config: [{
|
|
15022
15071
|
type: Input
|
|
15023
15072
|
}], stepNumber: [{
|
|
@@ -15034,6 +15083,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15034
15083
|
type: Input
|
|
15035
15084
|
}], isInsideLoop: [{
|
|
15036
15085
|
type: Input
|
|
15086
|
+
}], isReorder: [{
|
|
15087
|
+
type: Input
|
|
15037
15088
|
}], edit: [{
|
|
15038
15089
|
type: Output
|
|
15039
15090
|
}], link: [{
|
|
@@ -15060,6 +15111,7 @@ class TestCaseUploadStepComponent {
|
|
|
15060
15111
|
this.disabled = false;
|
|
15061
15112
|
this.isNested = false;
|
|
15062
15113
|
this.isInsideLoop = false;
|
|
15114
|
+
this.isReorder = false;
|
|
15063
15115
|
this.edit = new EventEmitter();
|
|
15064
15116
|
this.link = new EventEmitter();
|
|
15065
15117
|
this.duplicate = new EventEmitter();
|
|
@@ -15089,10 +15141,10 @@ class TestCaseUploadStepComponent {
|
|
|
15089
15141
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
15090
15142
|
}
|
|
15091
15143
|
TestCaseUploadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15092
|
-
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", isInsideLoop: "isInsideLoop" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Upload</span>\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=\"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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type:
|
|
15144
|
+
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", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Upload</span>\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=\"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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
15093
15145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, decorators: [{
|
|
15094
15146
|
type: Component,
|
|
15095
|
-
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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Upload</span>\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=\"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" }]
|
|
15147
|
+
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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Upload</span>\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=\"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" }]
|
|
15096
15148
|
}], propDecorators: { config: [{
|
|
15097
15149
|
type: Input
|
|
15098
15150
|
}], stepNumber: [{
|
|
@@ -15115,6 +15167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15115
15167
|
type: Input
|
|
15116
15168
|
}], isInsideLoop: [{
|
|
15117
15169
|
type: Input
|
|
15170
|
+
}], isReorder: [{
|
|
15171
|
+
type: Input
|
|
15118
15172
|
}], edit: [{
|
|
15119
15173
|
type: Output
|
|
15120
15174
|
}], link: [{
|
|
@@ -15138,6 +15192,7 @@ class TestCaseScreenshotStepComponent {
|
|
|
15138
15192
|
this.disabled = false;
|
|
15139
15193
|
this.isNested = false;
|
|
15140
15194
|
this.isInsideLoop = false;
|
|
15195
|
+
this.isReorder = false;
|
|
15141
15196
|
this.edit = new EventEmitter();
|
|
15142
15197
|
this.link = new EventEmitter();
|
|
15143
15198
|
this.duplicate = new EventEmitter();
|
|
@@ -15173,10 +15228,10 @@ class TestCaseScreenshotStepComponent {
|
|
|
15173
15228
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
15174
15229
|
}
|
|
15175
15230
|
TestCaseScreenshotStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15176
|
-
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", isInsideLoop: "isInsideLoop" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Screenshot</span>\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=\"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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type:
|
|
15231
|
+
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", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Screenshot</span>\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=\"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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
15177
15232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, decorators: [{
|
|
15178
15233
|
type: Component,
|
|
15179
|
-
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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Screenshot</span>\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=\"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" }]
|
|
15234
|
+
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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Screenshot</span>\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=\"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" }]
|
|
15180
15235
|
}], propDecorators: { config: [{
|
|
15181
15236
|
type: Input
|
|
15182
15237
|
}], stepNumber: [{
|
|
@@ -15197,6 +15252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15197
15252
|
type: Input
|
|
15198
15253
|
}], isInsideLoop: [{
|
|
15199
15254
|
type: Input
|
|
15255
|
+
}], isReorder: [{
|
|
15256
|
+
type: Input
|
|
15200
15257
|
}], edit: [{
|
|
15201
15258
|
type: Output
|
|
15202
15259
|
}], link: [{
|
|
@@ -15221,6 +15278,7 @@ class TestCaseCustomCodeStepComponent {
|
|
|
15221
15278
|
this.disabled = false;
|
|
15222
15279
|
this.isNested = false;
|
|
15223
15280
|
this.isInsideLoop = false;
|
|
15281
|
+
this.isReorder = false;
|
|
15224
15282
|
this.edit = new EventEmitter();
|
|
15225
15283
|
this.link = new EventEmitter();
|
|
15226
15284
|
this.duplicate = new EventEmitter();
|
|
@@ -15255,10 +15313,10 @@ class TestCaseCustomCodeStepComponent {
|
|
|
15255
15313
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
15256
15314
|
}
|
|
15257
15315
|
TestCaseCustomCodeStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15258
|
-
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", isInsideLoop: "isInsideLoop" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Custom Code</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type:
|
|
15316
|
+
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", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Custom Code</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
15259
15317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, decorators: [{
|
|
15260
15318
|
type: Component,
|
|
15261
|
-
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 <label 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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Custom Code</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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" }]
|
|
15319
|
+
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 class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 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 class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Custom Code</span>\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 <a href=\"#\" (click)=\"onViewDetails(); $event.preventDefault()\" 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 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" }]
|
|
15262
15320
|
}], propDecorators: { config: [{
|
|
15263
15321
|
type: Input
|
|
15264
15322
|
}], stepNumber: [{
|
|
@@ -15277,6 +15335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15277
15335
|
type: Input
|
|
15278
15336
|
}], isInsideLoop: [{
|
|
15279
15337
|
type: Input
|
|
15338
|
+
}], isReorder: [{
|
|
15339
|
+
type: Input
|
|
15280
15340
|
}], edit: [{
|
|
15281
15341
|
type: Output
|
|
15282
15342
|
}], link: [{
|
|
@@ -15427,7 +15487,7 @@ class LiveConversationComponent {
|
|
|
15427
15487
|
}
|
|
15428
15488
|
}
|
|
15429
15489
|
LiveConversationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveConversationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15430
|
-
LiveConversationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveConversationComponent, selector: "cqa-live-conversation", inputs: { conversation: "conversation", executionStatus: "executionStatus", stepFrom: "stepFrom", mode: "mode", stepId: "stepId", message: "message", remainingTime$: "remainingTime$", circleCircumference: "circleCircumference", showUserInputField: "showUserInputField", showUserInputFieldinDebug: "showUserInputFieldinDebug" }, outputs: { messageChange: "messageChange", sendMessage: "sendMessage", stopAgent: "stopAgent", stepAction: "stepAction", updateStepData: "updateStepData", redirectToCE: "redirectToCE", showUserInputFieldChange: "showUserInputFieldChange", showUserInputFieldinDebugChange: "showUserInputFieldinDebugChange" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <!-- Step Regular Mode Conversation Section -->\n <div\n *ngIf=\"shouldShowStepRegular\"\n class=\"conversation-section cqa-mt-2 cqa-p-3\"\n style=\"background-color: #FEF3C7; border-radius: 8px; border: 1px solid #FCD34D;\"\n >\n <div class=\"user-action-prompt\" *ngIf=\"!showUserInputField\">\n <div class=\"prompt-header cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 11V8\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 5H8.01\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span style=\"font-weight: 600; color: #92400E;\">User input required to proceed</span>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2\">\n <button\n class=\"action-btn primary\"\n (click)=\"onShowUserInputFieldChange(true)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Enter more details\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStopAgent()\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Stop\n </button>\n </div>\n </div>\n\n <div class=\"user-input-section\" *ngIf=\"showUserInputField\">\n <div class=\"input-container cqa-flex cqa-gap-2 cqa-mb-2\">\n <textarea\n class=\"input-field\"\n placeholder=\"Type your response...\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n (keyup.enter)=\"onSendMessage()\"\n rows=\"2\"\n autofocus\n style=\"flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #0A0A0A; resize: none;\"\n ></textarea>\n <button\n class=\"send-button\"\n [disabled]=\"!message\"\n (click)=\"onSendMessage()\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer;\"\n >\n Send\n </button>\n </div>\n <button\n class=\"cancel-button\"\n (click)=\"onShowUserInputFieldChange(false)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Back\n </button>\n </div>\n </div>\n\n <!-- Step Debug Mode Conversation Section -->\n <div\n *ngIf=\"shouldShowStepDebug\"\n class=\"conversation-section cqa-mt-2 cqa-p-3\"\n style=\"background-color: #FEF3C7; border-radius: 8px; border: 1px solid #FCD34D;\"\n >\n <div class=\"user-action-prompt\" *ngIf=\"!showUserInputFieldinDebug\">\n <div class=\"prompt-header cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 11V8\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 5H8.01\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span style=\"font-weight: 600; color: #92400E;\">User input required to proceed</span>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2\">\n <button\n class=\"action-btn primary\"\n (click)=\"onShowUserInputFieldinDebugChange(true)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Enter more details\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStepAction('skip')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Skip Step\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStepAction('skip_delete')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Delete Step\n </button>\n </div>\n </div>\n\n <div class=\"user-input-section\" *ngIf=\"showUserInputFieldinDebug\">\n <div class=\"input-container cqa-flex cqa-gap-2 cqa-mb-2\">\n <textarea\n class=\"input-field\"\n placeholder=\"Type your response...\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n (keyup.enter)=\"onSendMessage()\"\n rows=\"2\"\n autofocus\n style=\"flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #0A0A0A; resize: none;\"\n ></textarea>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2 cqa-mb-2\">\n <button\n class=\"action-btn primary\"\n [disabled]=\"!message\"\n (click)=\"onUpdateStepData('reRun', 'metadata')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Update and Rerun\n </button>\n <button\n class=\"action-btn primary\"\n [disabled]=\"!message\"\n (click)=\"onUpdateStepData('aiAgent', 'metadata')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Add New Steps and Rerun\n </button>\n </div>\n <button\n class=\"cancel-button\"\n (click)=\"onShowUserInputFieldinDebugChange(false)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Back\n </button>\n </div>\n </div>\n\n <!-- Test Case Group Level Conversation Input Section -->\n <div\n *ngIf=\"shouldShowTestCaseGroup\"\n class=\"conversation-input-section cqa-mt-3 cqa-p-3\"\n>\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n <div\n *ngIf=\"remainingTime$ | async as remainingTime\"\n class=\"mini-timer-container\"\n >\n <svg class=\"mini-progress-ring\" width=\"44\" height=\"44\">\n <circle\n class=\"mini-progress-ring__circle\"\n stroke=\"#3e98c7\"\n stroke-width=\"4\"\n fill=\"transparent\"\n r=\"20\"\n cx=\"22\"\n cy=\"22\"\n [style.strokeDasharray]=\"circleCircumference\"\n [style.strokeDashoffset.px]=\"getDashOffset(remainingTime)\"\n />\n </svg>\n <div class=\"mini-timer-text\" style=\"color: #374151; font-size: 12px; font-weight: 500;\">\n <span class=\"mini-time\">{{\n formatTime(remainingTime)\n }}</span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\" style=\"flex:1 1 0;\">\n <div *ngIf=\"!isLocatorNotDetect\" class=\"cqa-text-md cqa-text-[#161617] cqa-font-medium cqa-font-inter\">Enter the timeout duration to continue execution.</div>\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n <input\n *ngIf=\"!isLocatorNotDetect\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n [disabled]=\"isInputDisabled\"\n [type]=\"inputType\"\n class=\"form-control\"\n style=\"\n height: 36px;\n flex: 1;\n padding: 9px 13px;\n border-radius: 5px;\n border: 1px solid #E2E2E3;\n background-color: #FFFFFF;\n color: #0A0A0A;\n font-size: 14px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n outline: none;\n \"\n [style.border-color]=\"isInputDisabled ? '#E5E7EB' : '#D1D5DB'\"\n [style.background-color]=\"isInputDisabled ? '#F9FAFB' : '#FFFFFF'\"\n [style.color]=\"isInputDisabled ? '#9CA3AF' : '#0A0A0A'\"\n [style.cursor]=\"isInputDisabled ? 'not-allowed' : 'text'\"\n [placeholder]=\"inputPlaceholder\"\n onfocus=\"if (!this.disabled) { this.style.borderColor='#1447E6'; this.style.boxShadow='0 0 0 3px rgba(63, 67, 238, 0.1)'; }\"\n onblur=\"this.style.borderColor='#D1D5DB'; this.style.boxShadow='none';\"\n />\n <div\n *ngIf=\"isLocatorNotDetect\"\n (click)=\"onRedirectToCE()\"\n style=\"cursor: pointer;\"\n >\n <button\n class=\"btn\"\n style=\"\n padding: 8px 16px;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n background-color: #FFFFFF;\n color: #374151;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n transition: background-color 0.2s ease;\n \"\n onmouseover=\"this.style.backgroundColor='#F9FAFB'\"\n onmouseout=\"this.style.backgroundColor='#FFFFFF'\"\n >\n Record\n </button>\n </div>\n <button\n [disabled]=\"isResumeDisabled\"\n class=\"btn\"\n (click)=\"onSendMessage()\"\n style=\"\n height: 36px;\n padding: 8px 16px;\n border-radius: 8px;\n border: none;\n background-color: #1447E6;\n color: #FFFFFF;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n transition: background-color 0.2s ease;\n \"\n [style.background-color]=\"isResumeDisabled ? '#E2E2E3' : '#1447E6'\"\n [style.color]=\"isResumeDisabled ? '#9CA3AF' : '#FFFFFF'\"\n [style.cursor]=\"isResumeDisabled ? 'not-allowed' : 'pointer'\"\n onmouseover=\"if (!this.disabled) this.style.backgroundColor='#0F3CBA'\"\n onmouseout=\"if (!this.disabled) this.style.backgroundColor='#1447E6'\"\n >\n Resume\n </button>\n </div>\n </div>\n \n \n </div>\n</div>\n</div>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: { "async": i2$1.AsyncPipe } });
|
|
15490
|
+
LiveConversationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveConversationComponent, selector: "cqa-live-conversation", inputs: { conversation: "conversation", executionStatus: "executionStatus", stepFrom: "stepFrom", mode: "mode", stepId: "stepId", message: "message", remainingTime$: "remainingTime$", circleCircumference: "circleCircumference", showUserInputField: "showUserInputField", showUserInputFieldinDebug: "showUserInputFieldinDebug" }, outputs: { messageChange: "messageChange", sendMessage: "sendMessage", stopAgent: "stopAgent", stepAction: "stepAction", updateStepData: "updateStepData", redirectToCE: "redirectToCE", showUserInputFieldChange: "showUserInputFieldChange", showUserInputFieldinDebugChange: "showUserInputFieldinDebugChange" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <!-- Step Regular Mode Conversation Section -->\n <div\n *ngIf=\"shouldShowStepRegular\"\n class=\"conversation-section cqa-mt-2 cqa-p-3\"\n style=\"background-color: #FEF3C7; border-radius: 8px; border: 1px solid #FCD34D;\"\n >\n <div class=\"user-action-prompt\" *ngIf=\"!showUserInputField\">\n <div class=\"prompt-header cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 11V8\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 5H8.01\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span style=\"font-weight: 600; color: #92400E;\">User input required to proceed</span>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2\">\n <button\n class=\"action-btn primary\"\n (click)=\"onShowUserInputFieldChange(true)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Enter more details\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStopAgent()\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Stop\n </button>\n </div>\n </div>\n\n <div class=\"user-input-section\" *ngIf=\"showUserInputField\">\n <div class=\"input-container cqa-flex cqa-gap-2 cqa-mb-2\">\n <textarea\n class=\"input-field\"\n placeholder=\"Type your response...\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n (keyup.enter)=\"onSendMessage()\"\n rows=\"2\"\n autofocus\n style=\"flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #0A0A0A; resize: none;\"\n ></textarea>\n <button\n class=\"send-button\"\n [disabled]=\"!message\"\n (click)=\"onSendMessage()\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer;\"\n >\n Send\n </button>\n </div>\n <button\n class=\"cancel-button\"\n (click)=\"onShowUserInputFieldChange(false)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Back\n </button>\n </div>\n </div>\n\n <!-- Step Debug Mode Conversation Section -->\n <div\n *ngIf=\"shouldShowStepDebug\"\n class=\"conversation-section cqa-mt-2 cqa-p-3\"\n style=\"background-color: #FEF3C7; border-radius: 8px; border: 1px solid #FCD34D;\"\n >\n <div class=\"user-action-prompt\" *ngIf=\"!showUserInputFieldinDebug\">\n <div class=\"prompt-header cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 11V8\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 5H8.01\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span style=\"font-weight: 600; color: #92400E;\">User input required to proceed</span>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2\">\n <button\n class=\"action-btn primary\"\n (click)=\"onShowUserInputFieldinDebugChange(true)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Enter more details\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStepAction('skip')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Skip Step\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStepAction('skip_delete')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Delete Step\n </button>\n </div>\n </div>\n\n <div class=\"user-input-section\" *ngIf=\"showUserInputFieldinDebug\">\n <div class=\"input-container cqa-flex cqa-gap-2 cqa-mb-2\">\n <textarea\n class=\"input-field\"\n placeholder=\"Type your response...\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n (keyup.enter)=\"onSendMessage()\"\n rows=\"2\"\n autofocus\n style=\"flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #0A0A0A; resize: none;\"\n ></textarea>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2 cqa-mb-2\">\n <button\n class=\"action-btn primary\"\n [disabled]=\"!message\"\n (click)=\"onUpdateStepData('reRun', 'metadata')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Update and Rerun\n </button>\n <button\n class=\"action-btn primary\"\n [disabled]=\"!message\"\n (click)=\"onUpdateStepData('aiAgent', 'metadata')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Add New Steps and Rerun\n </button>\n </div>\n <button\n class=\"cancel-button\"\n (click)=\"onShowUserInputFieldinDebugChange(false)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Back\n </button>\n </div>\n </div>\n\n <!-- Test Case Group Level Conversation Input Section -->\n <div\n *ngIf=\"shouldShowTestCaseGroup\"\n class=\"conversation-input-section cqa-mt-3 cqa-p-3\"\n>\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n <div\n *ngIf=\"remainingTime$ | async as remainingTime\"\n class=\"mini-timer-container\"\n >\n <svg class=\"mini-progress-ring\" width=\"44\" height=\"44\">\n <circle\n class=\"mini-progress-ring__circle\"\n stroke=\"#3e98c7\"\n stroke-width=\"4\"\n fill=\"transparent\"\n r=\"20\"\n cx=\"22\"\n cy=\"22\"\n [style.strokeDasharray]=\"circleCircumference\"\n [style.strokeDashoffset.px]=\"getDashOffset(remainingTime)\"\n />\n </svg>\n <div class=\"mini-timer-text\" style=\"color: #374151; font-size: 12px; font-weight: 500;\">\n <span class=\"mini-time\">{{\n formatTime(remainingTime)\n }}</span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\" style=\"flex:1 1 0;\">\n <div *ngIf=\"!isLocatorNotDetect\" class=\"cqa-text-md cqa-text-[#161617] cqa-font-medium cqa-font-inter\">Enter the timeout duration to continue execution.</div>\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n <input\n *ngIf=\"!isLocatorNotDetect\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n [disabled]=\"isInputDisabled\"\n [type]=\"inputType\"\n class=\"form-control\"\n style=\"\n height: 36px;\n flex: 1;\n padding: 9px 13px;\n border-radius: 5px;\n border: 1px solid #E2E2E3;\n background-color: #FFFFFF;\n color: #0A0A0A;\n font-size: 14px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n outline: none;\n \"\n [style.border-color]=\"isInputDisabled ? '#E5E7EB' : '#D1D5DB'\"\n [style.background-color]=\"isInputDisabled ? '#F9FAFB' : '#FFFFFF'\"\n [style.color]=\"isInputDisabled ? '#9CA3AF' : '#0A0A0A'\"\n [style.cursor]=\"isInputDisabled ? 'not-allowed' : 'text'\"\n [placeholder]=\"inputPlaceholder\"\n onfocus=\"if (!this.disabled) { this.style.borderColor='#1447E6'; this.style.boxShadow='0 0 0 3px rgba(63, 67, 238, 0.1)'; }\"\n onblur=\"this.style.borderColor='#D1D5DB'; this.style.boxShadow='none';\"\n />\n <div\n *ngIf=\"isLocatorNotDetect\"\n (click)=\"onRedirectToCE()\"\n style=\"cursor: pointer;\"\n >\n <button\n class=\"btn\"\n style=\"\n padding: 8px 16px;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n background-color: #FFFFFF;\n color: #374151;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n transition: background-color 0.2s ease;\n \"\n onmouseover=\"this.style.backgroundColor='#F9FAFB'\"\n onmouseout=\"this.style.backgroundColor='#FFFFFF'\"\n >\n Record\n </button>\n </div>\n <button\n [disabled]=\"isResumeDisabled\"\n class=\"btn\"\n (click)=\"onSendMessage()\"\n style=\"\n height: 36px;\n padding: 8px 16px;\n border-radius: 8px;\n border: none;\n background-color: #1447E6;\n color: #FFFFFF;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n transition: background-color 0.2s ease;\n \"\n [style.background-color]=\"isResumeDisabled ? '#E2E2E3' : '#1447E6'\"\n [style.color]=\"isResumeDisabled ? '#9CA3AF' : '#FFFFFF'\"\n [style.cursor]=\"isResumeDisabled ? 'not-allowed' : 'pointer'\"\n onmouseover=\"if (!this.disabled) this.style.backgroundColor='#0F3CBA'\"\n onmouseout=\"if (!this.disabled) this.style.backgroundColor='#1447E6'\"\n >\n Resume\n </button>\n </div>\n </div>\n \n \n </div>\n</div>\n</div>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2$1.AsyncPipe } });
|
|
15431
15491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveConversationComponent, decorators: [{
|
|
15432
15492
|
type: Component,
|
|
15433
15493
|
args: [{ selector: 'cqa-live-conversation', template: "<div class=\"cqa-ui-root\">\n <!-- Step Regular Mode Conversation Section -->\n <div\n *ngIf=\"shouldShowStepRegular\"\n class=\"conversation-section cqa-mt-2 cqa-p-3\"\n style=\"background-color: #FEF3C7; border-radius: 8px; border: 1px solid #FCD34D;\"\n >\n <div class=\"user-action-prompt\" *ngIf=\"!showUserInputField\">\n <div class=\"prompt-header cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 11V8\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 5H8.01\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span style=\"font-weight: 600; color: #92400E;\">User input required to proceed</span>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2\">\n <button\n class=\"action-btn primary\"\n (click)=\"onShowUserInputFieldChange(true)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Enter more details\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStopAgent()\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Stop\n </button>\n </div>\n </div>\n\n <div class=\"user-input-section\" *ngIf=\"showUserInputField\">\n <div class=\"input-container cqa-flex cqa-gap-2 cqa-mb-2\">\n <textarea\n class=\"input-field\"\n placeholder=\"Type your response...\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n (keyup.enter)=\"onSendMessage()\"\n rows=\"2\"\n autofocus\n style=\"flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #0A0A0A; resize: none;\"\n ></textarea>\n <button\n class=\"send-button\"\n [disabled]=\"!message\"\n (click)=\"onSendMessage()\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer;\"\n >\n Send\n </button>\n </div>\n <button\n class=\"cancel-button\"\n (click)=\"onShowUserInputFieldChange(false)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Back\n </button>\n </div>\n </div>\n\n <!-- Step Debug Mode Conversation Section -->\n <div\n *ngIf=\"shouldShowStepDebug\"\n class=\"conversation-section cqa-mt-2 cqa-p-3\"\n style=\"background-color: #FEF3C7; border-radius: 8px; border: 1px solid #FCD34D;\"\n >\n <div class=\"user-action-prompt\" *ngIf=\"!showUserInputFieldinDebug\">\n <div class=\"prompt-header cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 11V8\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 5H8.01\" stroke=\"#92400E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span style=\"font-weight: 600; color: #92400E;\">User input required to proceed</span>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2\">\n <button\n class=\"action-btn primary\"\n (click)=\"onShowUserInputFieldinDebugChange(true)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Enter more details\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStepAction('skip')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Skip Step\n </button>\n <button\n class=\"action-btn secondary\"\n (click)=\"onStepAction('skip_delete')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Delete Step\n </button>\n </div>\n </div>\n\n <div class=\"user-input-section\" *ngIf=\"showUserInputFieldinDebug\">\n <div class=\"input-container cqa-flex cqa-gap-2 cqa-mb-2\">\n <textarea\n class=\"input-field\"\n placeholder=\"Type your response...\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n (keyup.enter)=\"onSendMessage()\"\n rows=\"2\"\n autofocus\n style=\"flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #0A0A0A; resize: none;\"\n ></textarea>\n </div>\n <div class=\"prompt-actions cqa-flex cqa-gap-2 cqa-mb-2\">\n <button\n class=\"action-btn primary\"\n [disabled]=\"!message\"\n (click)=\"onUpdateStepData('reRun', 'metadata')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Update and Rerun\n </button>\n <button\n class=\"action-btn primary\"\n [disabled]=\"!message\"\n (click)=\"onUpdateStepData('aiAgent', 'metadata')\"\n style=\"padding: 8px 16px; border-radius: 6px; border: none; background-color: #3F43EE; color: white; cursor: pointer; font-size: 14px;\"\n >\n Add New Steps and Rerun\n </button>\n </div>\n <button\n class=\"cancel-button\"\n (click)=\"onShowUserInputFieldinDebugChange(false)\"\n style=\"padding: 8px 16px; border-radius: 6px; border: 1px solid #D1D5DB; background-color: white; cursor: pointer; font-size: 14px;\"\n >\n Back\n </button>\n </div>\n </div>\n\n <!-- Test Case Group Level Conversation Input Section -->\n <div\n *ngIf=\"shouldShowTestCaseGroup\"\n class=\"conversation-input-section cqa-mt-3 cqa-p-3\"\n>\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n <div\n *ngIf=\"remainingTime$ | async as remainingTime\"\n class=\"mini-timer-container\"\n >\n <svg class=\"mini-progress-ring\" width=\"44\" height=\"44\">\n <circle\n class=\"mini-progress-ring__circle\"\n stroke=\"#3e98c7\"\n stroke-width=\"4\"\n fill=\"transparent\"\n r=\"20\"\n cx=\"22\"\n cy=\"22\"\n [style.strokeDasharray]=\"circleCircumference\"\n [style.strokeDashoffset.px]=\"getDashOffset(remainingTime)\"\n />\n </svg>\n <div class=\"mini-timer-text\" style=\"color: #374151; font-size: 12px; font-weight: 500;\">\n <span class=\"mini-time\">{{\n formatTime(remainingTime)\n }}</span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\" style=\"flex:1 1 0;\">\n <div *ngIf=\"!isLocatorNotDetect\" class=\"cqa-text-md cqa-text-[#161617] cqa-font-medium cqa-font-inter\">Enter the timeout duration to continue execution.</div>\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n <input\n *ngIf=\"!isLocatorNotDetect\"\n [ngModel]=\"message\"\n (ngModelChange)=\"onMessageChange($event)\"\n [disabled]=\"isInputDisabled\"\n [type]=\"inputType\"\n class=\"form-control\"\n style=\"\n height: 36px;\n flex: 1;\n padding: 9px 13px;\n border-radius: 5px;\n border: 1px solid #E2E2E3;\n background-color: #FFFFFF;\n color: #0A0A0A;\n font-size: 14px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n outline: none;\n \"\n [style.border-color]=\"isInputDisabled ? '#E5E7EB' : '#D1D5DB'\"\n [style.background-color]=\"isInputDisabled ? '#F9FAFB' : '#FFFFFF'\"\n [style.color]=\"isInputDisabled ? '#9CA3AF' : '#0A0A0A'\"\n [style.cursor]=\"isInputDisabled ? 'not-allowed' : 'text'\"\n [placeholder]=\"inputPlaceholder\"\n onfocus=\"if (!this.disabled) { this.style.borderColor='#1447E6'; this.style.boxShadow='0 0 0 3px rgba(63, 67, 238, 0.1)'; }\"\n onblur=\"this.style.borderColor='#D1D5DB'; this.style.boxShadow='none';\"\n />\n <div\n *ngIf=\"isLocatorNotDetect\"\n (click)=\"onRedirectToCE()\"\n style=\"cursor: pointer;\"\n >\n <button\n class=\"btn\"\n style=\"\n padding: 8px 16px;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n background-color: #FFFFFF;\n color: #374151;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n transition: background-color 0.2s ease;\n \"\n onmouseover=\"this.style.backgroundColor='#F9FAFB'\"\n onmouseout=\"this.style.backgroundColor='#FFFFFF'\"\n >\n Record\n </button>\n </div>\n <button\n [disabled]=\"isResumeDisabled\"\n class=\"btn\"\n (click)=\"onSendMessage()\"\n style=\"\n height: 36px;\n padding: 8px 16px;\n border-radius: 8px;\n border: none;\n background-color: #1447E6;\n color: #FFFFFF;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n transition: background-color 0.2s ease;\n \"\n [style.background-color]=\"isResumeDisabled ? '#E2E2E3' : '#1447E6'\"\n [style.color]=\"isResumeDisabled ? '#9CA3AF' : '#FFFFFF'\"\n [style.cursor]=\"isResumeDisabled ? 'not-allowed' : 'pointer'\"\n onmouseover=\"if (!this.disabled) this.style.backgroundColor='#0F3CBA'\"\n onmouseout=\"if (!this.disabled) this.style.backgroundColor='#1447E6'\"\n >\n Resume\n </button>\n </div>\n </div>\n \n \n </div>\n</div>\n</div>", styles: [] }]
|
|
@@ -15470,13 +15530,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15470
15530
|
}] } });
|
|
15471
15531
|
|
|
15472
15532
|
class StepBuilderActionComponent {
|
|
15473
|
-
constructor() {
|
|
15533
|
+
constructor(fb) {
|
|
15534
|
+
this.fb = fb;
|
|
15474
15535
|
/** List of action templates to display */
|
|
15475
15536
|
this.templates = [];
|
|
15476
15537
|
/** Placeholder text for search input */
|
|
15477
15538
|
this.searchPlaceholder = 'Search library';
|
|
15478
15539
|
/** Function to handle variable processing or custom logic. Can be passed from parent component. */
|
|
15479
15540
|
this.setTemplateVariables = () => { return []; };
|
|
15541
|
+
this.preventSelectTemplate = ['databaseverification'];
|
|
15542
|
+
this.templateChanged = new EventEmitter();
|
|
15480
15543
|
/** Emit when step is created */
|
|
15481
15544
|
this.createStep = new EventEmitter();
|
|
15482
15545
|
/** Emit when cancelled */
|
|
@@ -15487,6 +15550,8 @@ class StepBuilderActionComponent {
|
|
|
15487
15550
|
this.metadata = '';
|
|
15488
15551
|
this.description = '';
|
|
15489
15552
|
this.advancedExpanded = false;
|
|
15553
|
+
this.templateVariables = [];
|
|
15554
|
+
this.variablesForm = this.fb.group({});
|
|
15490
15555
|
}
|
|
15491
15556
|
ngOnInit() {
|
|
15492
15557
|
this.filteredTemplates = [...this.templates];
|
|
@@ -15525,9 +15590,54 @@ class StepBuilderActionComponent {
|
|
|
15525
15590
|
console.log("filteredTemplates", this.filteredTemplates);
|
|
15526
15591
|
}
|
|
15527
15592
|
selectTemplate(template) {
|
|
15593
|
+
if (this.preventSelectTemplate.includes(template.displayName || '')) {
|
|
15594
|
+
this.templateChanged.emit(template);
|
|
15595
|
+
return;
|
|
15596
|
+
}
|
|
15597
|
+
this.templateChanged.emit(template);
|
|
15528
15598
|
this.selectedTemplate = template;
|
|
15529
15599
|
if (this.setTemplateVariables && template.variables) {
|
|
15530
|
-
this.templateVariables = this.setTemplateVariables(template
|
|
15600
|
+
this.templateVariables = this.setTemplateVariables(template);
|
|
15601
|
+
this.buildVariablesForm();
|
|
15602
|
+
}
|
|
15603
|
+
}
|
|
15604
|
+
buildVariablesForm() {
|
|
15605
|
+
// Clear existing form controls
|
|
15606
|
+
Object.keys(this.variablesForm.controls).forEach(key => {
|
|
15607
|
+
this.variablesForm.removeControl(key);
|
|
15608
|
+
});
|
|
15609
|
+
// Add form controls for each variable
|
|
15610
|
+
this.templateVariables.forEach(variable => {
|
|
15611
|
+
this.variablesForm.addControl(variable.name, new FormControl(variable.value || ''));
|
|
15612
|
+
});
|
|
15613
|
+
}
|
|
15614
|
+
getSelectConfig(variable) {
|
|
15615
|
+
const options = (variable.options || []).map((opt) => ({
|
|
15616
|
+
id: opt,
|
|
15617
|
+
value: opt,
|
|
15618
|
+
name: opt,
|
|
15619
|
+
label: opt
|
|
15620
|
+
}));
|
|
15621
|
+
return {
|
|
15622
|
+
key: variable.name,
|
|
15623
|
+
placeholder: `Select ${variable.label}`,
|
|
15624
|
+
multiple: false,
|
|
15625
|
+
searchable: false,
|
|
15626
|
+
options: options,
|
|
15627
|
+
onChange: (value) => {
|
|
15628
|
+
this.onVariableValueChange(variable.name, value);
|
|
15629
|
+
}
|
|
15630
|
+
};
|
|
15631
|
+
}
|
|
15632
|
+
onVariableValueChange(variableName, value) {
|
|
15633
|
+
// Update the variable in templateVariables array
|
|
15634
|
+
const variable = this.templateVariables.find(v => v.name === variableName);
|
|
15635
|
+
if (variable) {
|
|
15636
|
+
variable.value = value;
|
|
15637
|
+
}
|
|
15638
|
+
// Also update form control
|
|
15639
|
+
if (this.variablesForm.get(variableName)) {
|
|
15640
|
+
this.variablesForm.get(variableName)?.setValue(value);
|
|
15531
15641
|
}
|
|
15532
15642
|
}
|
|
15533
15643
|
onBack() {
|
|
@@ -15536,6 +15646,12 @@ class StepBuilderActionComponent {
|
|
|
15536
15646
|
this.description = '';
|
|
15537
15647
|
this.advancedExpanded = false;
|
|
15538
15648
|
this.templateVariables = [];
|
|
15649
|
+
// Clear form controls
|
|
15650
|
+
Object.keys(this.variablesForm.controls).forEach(key => {
|
|
15651
|
+
this.variablesForm.removeControl(key);
|
|
15652
|
+
});
|
|
15653
|
+
// Reapply filter to maintain search state
|
|
15654
|
+
this.applyFilter();
|
|
15539
15655
|
}
|
|
15540
15656
|
onCancel() {
|
|
15541
15657
|
this.onBack();
|
|
@@ -15564,17 +15680,21 @@ class StepBuilderActionComponent {
|
|
|
15564
15680
|
console.log(key, value);
|
|
15565
15681
|
}
|
|
15566
15682
|
}
|
|
15567
|
-
StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15568
|
-
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-px-3 cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\">\n
|
|
15683
|
+
StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
15684
|
+
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-px-3 cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select\n [form]=\"variablesForm\"\n [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
15569
15685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
|
|
15570
15686
|
type: Component,
|
|
15571
|
-
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-px-3 cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\">\n
|
|
15572
|
-
}], propDecorators: { templates: [{
|
|
15687
|
+
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-px-3 cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select\n [form]=\"variablesForm\"\n [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", styles: [] }]
|
|
15688
|
+
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { templates: [{
|
|
15573
15689
|
type: Input
|
|
15574
15690
|
}], searchPlaceholder: [{
|
|
15575
15691
|
type: Input
|
|
15576
15692
|
}], setTemplateVariables: [{
|
|
15577
15693
|
type: Input
|
|
15694
|
+
}], preventSelectTemplate: [{
|
|
15695
|
+
type: Input
|
|
15696
|
+
}], templateChanged: [{
|
|
15697
|
+
type: Output
|
|
15578
15698
|
}], createStep: [{
|
|
15579
15699
|
type: Output
|
|
15580
15700
|
}], cancelled: [{
|
|
@@ -15687,7 +15807,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
15687
15807
|
MatDialogModule,
|
|
15688
15808
|
OverlayModule,
|
|
15689
15809
|
PortalModule,
|
|
15690
|
-
NgxTypedJsModule
|
|
15810
|
+
NgxTypedJsModule,
|
|
15811
|
+
DndModule], exports: [ButtonComponent,
|
|
15691
15812
|
SearchBarComponent,
|
|
15692
15813
|
SegmentControlComponent,
|
|
15693
15814
|
DialogComponent,
|
|
@@ -15822,7 +15943,8 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
|
|
|
15822
15943
|
MatDialogModule,
|
|
15823
15944
|
OverlayModule,
|
|
15824
15945
|
PortalModule,
|
|
15825
|
-
NgxTypedJsModule
|
|
15946
|
+
NgxTypedJsModule,
|
|
15947
|
+
DndModule
|
|
15826
15948
|
]] });
|
|
15827
15949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, decorators: [{
|
|
15828
15950
|
type: NgModule,
|
|
@@ -15931,7 +16053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15931
16053
|
MatDialogModule,
|
|
15932
16054
|
OverlayModule,
|
|
15933
16055
|
PortalModule,
|
|
15934
|
-
NgxTypedJsModule
|
|
16056
|
+
NgxTypedJsModule,
|
|
16057
|
+
DndModule
|
|
15935
16058
|
],
|
|
15936
16059
|
exports: [
|
|
15937
16060
|
ButtonComponent,
|
|
@@ -16176,14 +16299,14 @@ class DialogService {
|
|
|
16176
16299
|
});
|
|
16177
16300
|
}
|
|
16178
16301
|
}
|
|
16179
|
-
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$
|
|
16302
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$7.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
16180
16303
|
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, providedIn: 'root' });
|
|
16181
16304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, decorators: [{
|
|
16182
16305
|
type: Injectable,
|
|
16183
16306
|
args: [{
|
|
16184
16307
|
providedIn: 'root',
|
|
16185
16308
|
}]
|
|
16186
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
16309
|
+
}], ctorParameters: function () { return [{ type: i1$7.Overlay }, { type: i0.Injector }]; } });
|
|
16187
16310
|
|
|
16188
16311
|
/**
|
|
16189
16312
|
* Generated bundle index. Do not edit.
|