@cqa-lib/cqa-ui 1.1.66 → 1.1.67
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/execution-screen/condition-step/condition-step.component.mjs +3 -1
- package/esm2020/lib/execution-screen/loop-step/loop-step.component.mjs +115 -14
- package/esm2020/lib/execution-screen/step-group/step-group.component.mjs +180 -3
- package/esm2020/lib/execution-screen/step-renderer/step-renderer.component.mjs +143 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs +562 -151
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +573 -150
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/loop-step/loop-step.component.d.ts +11 -1
- package/lib/execution-screen/step-group/step-group.component.d.ts +36 -2
- package/lib/execution-screen/step-renderer/step-renderer.component.d.ts +15 -1
- package/package.json +1 -1
|
@@ -2,15 +2,15 @@ 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, 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 i6 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
15
|
import * as i2$2 from '@angular/material/select';
|
|
16
16
|
import { MatSelectModule } from '@angular/material/select';
|
|
@@ -25,13 +25,13 @@ import * as i4$1 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$5 from '@angular/cdk/overlay';
|
|
29
29
|
import { OverlayContainer, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
30
30
|
import * as i3 from '@angular/cdk/portal';
|
|
31
31
|
import { TemplatePortal, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
|
|
32
|
-
import * as i1$
|
|
32
|
+
import * as i1$4 from 'ngx-typed-js';
|
|
33
33
|
import { NgxTypedJsModule } from 'ngx-typed-js';
|
|
34
|
-
import * as i1$
|
|
34
|
+
import * as i1$1 from '@angular/platform-browser';
|
|
35
35
|
import * as jquery from 'jquery';
|
|
36
36
|
import * as momentImport from 'moment';
|
|
37
37
|
import 'daterangepicker';
|
|
@@ -400,7 +400,7 @@ class SearchBarComponent {
|
|
|
400
400
|
}
|
|
401
401
|
}
|
|
402
402
|
SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
|
-
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:
|
|
403
|
+
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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.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"] }] });
|
|
404
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
405
405
|
type: Component,
|
|
406
406
|
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: [] }]
|
|
@@ -1336,12 +1336,12 @@ class DynamicTableComponent {
|
|
|
1336
1336
|
return sa.localeCompare(sb, undefined, { sensitivity: 'base', numeric: true });
|
|
1337
1337
|
}
|
|
1338
1338
|
}
|
|
1339
|
-
DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i1$
|
|
1339
|
+
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 });
|
|
1340
1340
|
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 });
|
|
1341
1341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
1342
1342
|
type: Component,
|
|
1343
1343
|
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: [] }]
|
|
1344
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
1344
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
1345
1345
|
type: Input
|
|
1346
1346
|
}], columns: [{
|
|
1347
1347
|
type: Input
|
|
@@ -1503,7 +1503,7 @@ class ActionMenuButtonComponent {
|
|
|
1503
1503
|
}
|
|
1504
1504
|
}
|
|
1505
1505
|
ActionMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1506
|
-
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$
|
|
1506
|
+
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"] }] });
|
|
1507
1507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, decorators: [{
|
|
1508
1508
|
type: Component,
|
|
1509
1509
|
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: [] }]
|
|
@@ -2151,7 +2151,7 @@ class DynamicSelectFieldComponent {
|
|
|
2151
2151
|
}
|
|
2152
2152
|
}
|
|
2153
2153
|
DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2154
|
-
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$
|
|
2154
|
+
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$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.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 });
|
|
2155
2155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
|
|
2156
2156
|
type: Component,
|
|
2157
2157
|
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>" }]
|
|
@@ -3114,12 +3114,12 @@ class DynamicFilterComponent {
|
|
|
3114
3114
|
return null;
|
|
3115
3115
|
}
|
|
3116
3116
|
}
|
|
3117
|
-
DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token:
|
|
3118
|
-
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 });
|
|
3117
|
+
DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: i6.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
3118
|
+
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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.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 });
|
|
3119
3119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
3120
3120
|
type: Component,
|
|
3121
3121
|
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: [] }]
|
|
3122
|
-
}], ctorParameters: function () { return [{ type:
|
|
3122
|
+
}], ctorParameters: function () { return [{ type: i6.FormBuilder }]; }, propDecorators: { config: [{
|
|
3123
3123
|
type: Input
|
|
3124
3124
|
}], model: [{
|
|
3125
3125
|
type: Input
|
|
@@ -3185,7 +3185,7 @@ class ColumnVisibilityComponent {
|
|
|
3185
3185
|
}
|
|
3186
3186
|
}
|
|
3187
3187
|
ColumnVisibilityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3188
|
-
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:
|
|
3188
|
+
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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.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 });
|
|
3189
3189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, decorators: [{
|
|
3190
3190
|
type: Component,
|
|
3191
3191
|
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: [] }]
|
|
@@ -3718,7 +3718,7 @@ class DashboardHeaderComponent {
|
|
|
3718
3718
|
}
|
|
3719
3719
|
}
|
|
3720
3720
|
DashboardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3721
|
-
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 });
|
|
3721
|
+
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 });
|
|
3722
3722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, decorators: [{
|
|
3723
3723
|
type: Component,
|
|
3724
3724
|
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: [] }]
|
|
@@ -5640,7 +5640,7 @@ class SelfHealAnalysisComponent {
|
|
|
5640
5640
|
}
|
|
5641
5641
|
}
|
|
5642
5642
|
SelfHealAnalysisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelfHealAnalysisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5643
|
-
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" }, 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-[10px] 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 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 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 Accept\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 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 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 Modify & Accept\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"] }] });
|
|
5643
|
+
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" }, 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-[10px] 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 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 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 Accept\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 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 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 Modify & Accept\n </button>\n </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
5644
5644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelfHealAnalysisComponent, decorators: [{
|
|
5645
5645
|
type: Component,
|
|
5646
5646
|
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-[10px] 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 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 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 Accept\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 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 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 Modify & Accept\n </button>\n </div>\n</div>\n", styles: [] }]
|
|
@@ -6099,6 +6099,19 @@ class StepRendererComponent {
|
|
|
6099
6099
|
if (changes['step'] && this.container) {
|
|
6100
6100
|
this.loadComponent();
|
|
6101
6101
|
}
|
|
6102
|
+
// Also reload if step properties change (like nestedSteps, children, steps)
|
|
6103
|
+
if (changes['step'] && changes['step'].currentValue && this.container) {
|
|
6104
|
+
const currentStep = changes['step'].currentValue;
|
|
6105
|
+
const previousStep = changes['step'].previousValue;
|
|
6106
|
+
// Check if nestedSteps, children, steps, or expanded changed for loop/step-group
|
|
6107
|
+
if (previousStep && (currentStep.nestedSteps !== previousStep.nestedSteps ||
|
|
6108
|
+
currentStep.children !== previousStep.children ||
|
|
6109
|
+
currentStep.steps !== previousStep.steps ||
|
|
6110
|
+
currentStep.expanded !== previousStep.expanded ||
|
|
6111
|
+
(currentStep.config && currentStep.config.expanded !== previousStep.config?.expanded))) {
|
|
6112
|
+
this.loadComponent();
|
|
6113
|
+
}
|
|
6114
|
+
}
|
|
6102
6115
|
}
|
|
6103
6116
|
ngAfterViewInit() {
|
|
6104
6117
|
this.loadComponent();
|
|
@@ -6118,6 +6131,106 @@ class StepRendererComponent {
|
|
|
6118
6131
|
instance[key] = this.step[key];
|
|
6119
6132
|
}
|
|
6120
6133
|
});
|
|
6134
|
+
// Special handling for loop-step: map children to nestedSteps if nestedSteps is not present
|
|
6135
|
+
if (this.step.type === 'loop' && this.step.children && !this.step.nestedSteps) {
|
|
6136
|
+
instance.nestedSteps = this.step.children;
|
|
6137
|
+
}
|
|
6138
|
+
// Special handling for loop-step: initialize iterations if not present
|
|
6139
|
+
if (this.step.type === 'loop' && !instance.iterations) {
|
|
6140
|
+
// Use handler if available, otherwise try to initialize from step.executedResult.stepResult
|
|
6141
|
+
if (this.getLoopIterationsHandler) {
|
|
6142
|
+
instance.iterations = this.getLoopIterationsHandler(this.step);
|
|
6143
|
+
}
|
|
6144
|
+
else if (this.step.executedResult?.stepResult && Array.isArray(this.step.executedResult.stepResult)) {
|
|
6145
|
+
// Initialize iterations directly from stepResult
|
|
6146
|
+
const iterations = [];
|
|
6147
|
+
this.step.executedResult.stepResult.forEach((iteration) => {
|
|
6148
|
+
const iterationIndex = iteration.index !== undefined && iteration.index !== null ? iteration.index : iterations.length;
|
|
6149
|
+
let status = 'pending';
|
|
6150
|
+
if (iteration.status) {
|
|
6151
|
+
const statusLower = iteration.status.toLowerCase();
|
|
6152
|
+
if (statusLower === 'success' || statusLower === 'passed') {
|
|
6153
|
+
status = 'success';
|
|
6154
|
+
}
|
|
6155
|
+
else if (statusLower === 'failure' || statusLower === 'failed') {
|
|
6156
|
+
status = 'failed';
|
|
6157
|
+
}
|
|
6158
|
+
else if (statusLower === 'running' || statusLower === 'in_progress') {
|
|
6159
|
+
status = 'running';
|
|
6160
|
+
}
|
|
6161
|
+
}
|
|
6162
|
+
iterations.push({
|
|
6163
|
+
id: `iter-${iterationIndex}`,
|
|
6164
|
+
label: `iter ${iterationIndex}`,
|
|
6165
|
+
status: status,
|
|
6166
|
+
subSteps: [],
|
|
6167
|
+
index: iterationIndex
|
|
6168
|
+
});
|
|
6169
|
+
});
|
|
6170
|
+
instance.iterations = iterations;
|
|
6171
|
+
}
|
|
6172
|
+
}
|
|
6173
|
+
// Special handling for loop-step: set defaultIteration and selectedIterationId
|
|
6174
|
+
if (this.step.type === 'loop') {
|
|
6175
|
+
// Set defaultIteration to 'last' if not already set
|
|
6176
|
+
if (!instance.defaultIteration) {
|
|
6177
|
+
instance.defaultIteration = 'last';
|
|
6178
|
+
}
|
|
6179
|
+
// Set selectedIterationId to last iteration if not already set
|
|
6180
|
+
const iterations = instance.iterations;
|
|
6181
|
+
if (iterations && Array.isArray(iterations) && iterations.length > 0 && !instance.selectedIterationId) {
|
|
6182
|
+
const lastIteration = iterations[iterations.length - 1];
|
|
6183
|
+
instance.selectedIterationId = lastIteration.id;
|
|
6184
|
+
}
|
|
6185
|
+
}
|
|
6186
|
+
// Special handling for step-group: map children to steps if steps is not present
|
|
6187
|
+
if (this.step.type === 'step-group' && this.step.children && !this.step.steps) {
|
|
6188
|
+
instance.steps = this.step.children;
|
|
6189
|
+
}
|
|
6190
|
+
// Ensure expanded property is passed correctly
|
|
6191
|
+
// Use isStepExpandedHandler if available, otherwise use step.expanded or step.config.expanded
|
|
6192
|
+
if (this.isStepExpandedHandler && this.step) {
|
|
6193
|
+
const expandedState = this.isStepExpandedHandler(this.step);
|
|
6194
|
+
instance.expanded = expandedState;
|
|
6195
|
+
if (instance.config) {
|
|
6196
|
+
instance.config.expanded = expandedState;
|
|
6197
|
+
}
|
|
6198
|
+
}
|
|
6199
|
+
else if (this.step.expanded !== undefined) {
|
|
6200
|
+
instance.expanded = this.step.expanded;
|
|
6201
|
+
if (instance.config) {
|
|
6202
|
+
instance.config.expanded = this.step.expanded;
|
|
6203
|
+
}
|
|
6204
|
+
}
|
|
6205
|
+
// Pass handler functions to the component instance
|
|
6206
|
+
if (this.onExpandHandler)
|
|
6207
|
+
instance.onExpandHandler = this.onExpandHandler;
|
|
6208
|
+
if (this.getConditionBranchesHandler)
|
|
6209
|
+
instance.getConditionBranchesHandler = this.getConditionBranchesHandler;
|
|
6210
|
+
if (this.isStepLoadingHandler)
|
|
6211
|
+
instance.isStepLoadingHandler = this.isStepLoadingHandler;
|
|
6212
|
+
if (this.isStepExpandedHandler)
|
|
6213
|
+
instance.isStepExpandedHandler = this.isStepExpandedHandler;
|
|
6214
|
+
if (this.convertMsToSecondsHandler)
|
|
6215
|
+
instance.convertMsToSecondsHandler = this.convertMsToSecondsHandler;
|
|
6216
|
+
if (this.formatFailureDetailsHandler)
|
|
6217
|
+
instance.formatFailureDetailsHandler = this.formatFailureDetailsHandler;
|
|
6218
|
+
if (this.getSelfHealAnalysisHandler)
|
|
6219
|
+
instance.getSelfHealAnalysisHandler = this.getSelfHealAnalysisHandler;
|
|
6220
|
+
if (this.getLoopIterationsHandler)
|
|
6221
|
+
instance.getLoopIterationsHandler = this.getLoopIterationsHandler;
|
|
6222
|
+
if (this.onMakeCurrentBaselineHandler)
|
|
6223
|
+
instance.onMakeCurrentBaselineHandler = this.onMakeCurrentBaselineHandler;
|
|
6224
|
+
if (this.onUploadBaselineHandler)
|
|
6225
|
+
instance.onUploadBaselineHandler = this.onUploadBaselineHandler;
|
|
6226
|
+
if (this.onAnalyzeHandler)
|
|
6227
|
+
instance.onAnalyzeHandler = this.onAnalyzeHandler;
|
|
6228
|
+
if (this.onViewFullLogsHandler)
|
|
6229
|
+
instance.onViewFullLogsHandler = this.onViewFullLogsHandler;
|
|
6230
|
+
if (this.onSelfHealActionHandler)
|
|
6231
|
+
instance.onSelfHealActionHandler = this.onSelfHealActionHandler;
|
|
6232
|
+
if (this.isUploadingBaseline !== undefined)
|
|
6233
|
+
instance.isUploadingBaseline = this.isUploadingBaseline;
|
|
6121
6234
|
// Also set config for backward compatibility with components that still use config input
|
|
6122
6235
|
if ('config' in instance) {
|
|
6123
6236
|
instance.config = this.step;
|
|
@@ -6126,7 +6239,7 @@ class StepRendererComponent {
|
|
|
6126
6239
|
}
|
|
6127
6240
|
}
|
|
6128
6241
|
StepRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepRendererComponent, deps: [{ token: STEP_COMPONENT_MAP }], target: i0.ɵɵFactoryTarget.Component });
|
|
6129
|
-
StepRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepRendererComponent, selector: "cqa-step-renderer", inputs: { step: "step" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true });
|
|
6242
|
+
StepRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepRendererComponent, selector: "cqa-step-renderer", inputs: { step: "step", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", isUploadingBaseline: "isUploadingBaseline", getLoopIterationsHandler: "getLoopIterationsHandler" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true });
|
|
6130
6243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepRendererComponent, decorators: [{
|
|
6131
6244
|
type: Component,
|
|
6132
6245
|
args: [{
|
|
@@ -6138,6 +6251,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6138
6251
|
args: [STEP_COMPONENT_MAP]
|
|
6139
6252
|
}] }]; }, propDecorators: { step: [{
|
|
6140
6253
|
type: Input
|
|
6254
|
+
}], onExpandHandler: [{
|
|
6255
|
+
type: Input
|
|
6256
|
+
}], getConditionBranchesHandler: [{
|
|
6257
|
+
type: Input
|
|
6258
|
+
}], isStepLoadingHandler: [{
|
|
6259
|
+
type: Input
|
|
6260
|
+
}], isStepExpandedHandler: [{
|
|
6261
|
+
type: Input
|
|
6262
|
+
}], convertMsToSecondsHandler: [{
|
|
6263
|
+
type: Input
|
|
6264
|
+
}], formatFailureDetailsHandler: [{
|
|
6265
|
+
type: Input
|
|
6266
|
+
}], getSelfHealAnalysisHandler: [{
|
|
6267
|
+
type: Input
|
|
6268
|
+
}], onMakeCurrentBaselineHandler: [{
|
|
6269
|
+
type: Input
|
|
6270
|
+
}], onUploadBaselineHandler: [{
|
|
6271
|
+
type: Input
|
|
6272
|
+
}], onAnalyzeHandler: [{
|
|
6273
|
+
type: Input
|
|
6274
|
+
}], onViewFullLogsHandler: [{
|
|
6275
|
+
type: Input
|
|
6276
|
+
}], onSelfHealActionHandler: [{
|
|
6277
|
+
type: Input
|
|
6278
|
+
}], isUploadingBaseline: [{
|
|
6279
|
+
type: Input
|
|
6280
|
+
}], getLoopIterationsHandler: [{
|
|
6281
|
+
type: Input
|
|
6141
6282
|
}], container: [{
|
|
6142
6283
|
type: ViewChild,
|
|
6143
6284
|
args: ['container', { read: ViewContainerRef }]
|
|
@@ -6190,6 +6331,28 @@ class StepGroupComponent extends BaseStepComponent {
|
|
|
6190
6331
|
// Emit event when expanding (transitioning from collapsed to expanded)
|
|
6191
6332
|
if (!wasExpanded && this.isExpanded) {
|
|
6192
6333
|
this.onExpand.emit();
|
|
6334
|
+
// If this step has children (hasChild is true) and onExpandHandler is provided, call it to fetch children
|
|
6335
|
+
if (this.onExpandHandler && this.config) {
|
|
6336
|
+
const hasChild = this.config.hasChild ||
|
|
6337
|
+
((this.config.steps?.length === 0 || !this.config.steps) && this.testStepResultId);
|
|
6338
|
+
if (hasChild) {
|
|
6339
|
+
// Create a step config object for the handler with hasChild property
|
|
6340
|
+
const stepConfig = {
|
|
6341
|
+
...this.config,
|
|
6342
|
+
hasChild: true,
|
|
6343
|
+
expanded: true,
|
|
6344
|
+
testStepType: this.config.testStepType || 'STEP_GROUP',
|
|
6345
|
+
children: this.config.steps || [],
|
|
6346
|
+
testStepResultId: this.testStepResultId,
|
|
6347
|
+
id: this.id
|
|
6348
|
+
};
|
|
6349
|
+
this.onExpandHandler(stepConfig);
|
|
6350
|
+
}
|
|
6351
|
+
}
|
|
6352
|
+
}
|
|
6353
|
+
// Ensure expanded state is synced with config
|
|
6354
|
+
if (this.config) {
|
|
6355
|
+
this.config.expanded = this.isExpanded;
|
|
6193
6356
|
}
|
|
6194
6357
|
}
|
|
6195
6358
|
// Helper method to check if a step is a step-group with hasChild
|
|
@@ -6206,125 +6369,141 @@ class StepGroupComponent extends BaseStepComponent {
|
|
|
6206
6369
|
const stepGroup = step;
|
|
6207
6370
|
return stepGroup.steps || step.children || [];
|
|
6208
6371
|
}
|
|
6209
|
-
|
|
6210
|
-
|
|
6211
|
-
|
|
6212
|
-
|
|
6213
|
-
type: Component,
|
|
6214
|
-
args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\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>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </div>\n\n <!-- Folder Icon -->\n <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Step group: {{ config.groupName }}\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Nested Steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n <ng-container *ngFor=\"let step of config.steps\">\n <!-- For nested step groups with hasChild, render directly with onExpand handler -->\n <cqa-step-group \n *ngIf=\"isNestedStepGroupWithChildren(step) && onExpandHandler\"\n [id]=\"step.id\"\n [testStepResultId]=\"step.testStepResultId\"\n [stepNumber]=\"step.stepNumber\"\n [title]=\"step.title\"\n [status]=\"step.status\"\n [duration]=\"step.duration\"\n [expanded]=\"step.expanded\"\n [groupName]=\"getGroupName(step)\"\n [steps]=\"getSteps(step)\"\n [timingBreakdown]=\"step.timingBreakdown\"\n [onExpandHandler]=\"onExpandHandler\"\n (onExpand)=\"onExpandHandler && onExpandHandler(step)\">\n </cqa-step-group>\n <!-- For other step types, use step-renderer -->\n <cqa-step-renderer \n *ngIf=\"!isNestedStepGroupWithChildren(step) || !onExpandHandler\" \n [step]=\"step\">\n </cqa-step-renderer>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
6215
|
-
}], propDecorators: { id: [{
|
|
6216
|
-
type: Input
|
|
6217
|
-
}], testStepResultId: [{
|
|
6218
|
-
type: Input
|
|
6219
|
-
}], stepNumber: [{
|
|
6220
|
-
type: Input
|
|
6221
|
-
}], title: [{
|
|
6222
|
-
type: Input
|
|
6223
|
-
}], status: [{
|
|
6224
|
-
type: Input
|
|
6225
|
-
}], duration: [{
|
|
6226
|
-
type: Input
|
|
6227
|
-
}], timingBreakdown: [{
|
|
6228
|
-
type: Input
|
|
6229
|
-
}], expanded: [{
|
|
6230
|
-
type: Input
|
|
6231
|
-
}], groupName: [{
|
|
6232
|
-
type: Input
|
|
6233
|
-
}], steps: [{
|
|
6234
|
-
type: Input
|
|
6235
|
-
}], onExpandHandler: [{
|
|
6236
|
-
type: Input
|
|
6237
|
-
}], onExpand: [{
|
|
6238
|
-
type: Output
|
|
6239
|
-
}] } });
|
|
6240
|
-
|
|
6241
|
-
class ConditionStepComponent extends BaseStepComponent {
|
|
6242
|
-
constructor() {
|
|
6243
|
-
super(...arguments);
|
|
6244
|
-
this.onBranchClickEvent = new EventEmitter();
|
|
6245
|
-
this.onExpand = new EventEmitter();
|
|
6246
|
-
this.isUploadingBaseline = {};
|
|
6247
|
-
this.makeCurrentBaseline = new EventEmitter();
|
|
6248
|
-
this.uploadBaseline = new EventEmitter();
|
|
6249
|
-
this.analyze = new EventEmitter();
|
|
6250
|
-
this.viewFullLogs = new EventEmitter();
|
|
6251
|
-
this.selfHealAction = new EventEmitter();
|
|
6252
|
-
this.showFailedStepDetails = false;
|
|
6372
|
+
// Helper method to check if a step is a loop step
|
|
6373
|
+
isNestedLoopStep(step) {
|
|
6374
|
+
const stepType = step.testStepType || step.type;
|
|
6375
|
+
return stepType === 'FOR_LOOP' || stepType === 'WHILE_LOOP' || stepType === 'loop';
|
|
6253
6376
|
}
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6257
|
-
|
|
6258
|
-
|
|
6259
|
-
|
|
6260
|
-
title: this.title,
|
|
6261
|
-
status: this.status,
|
|
6262
|
-
duration: this.duration,
|
|
6263
|
-
type: 'condition',
|
|
6264
|
-
conditionText: this.conditionText,
|
|
6265
|
-
branches: this.branches,
|
|
6266
|
-
timingBreakdown: this.timingBreakdown,
|
|
6267
|
-
expanded: this.expanded,
|
|
6268
|
-
};
|
|
6269
|
-
super.ngOnInit();
|
|
6377
|
+
// Helper method to check if a step is a condition step
|
|
6378
|
+
isNestedConditionStep(step) {
|
|
6379
|
+
const stepType = step.testStepType || step.type;
|
|
6380
|
+
return stepType === 'CONDITION_IF' || stepType === 'CONDITION_ELSE' ||
|
|
6381
|
+
stepType === 'CONDITION_ELSE_IF' || stepType === 'CONDITION_ELSEIF' ||
|
|
6382
|
+
stepType === 'condition';
|
|
6270
6383
|
}
|
|
6271
|
-
|
|
6272
|
-
|
|
6273
|
-
|
|
6274
|
-
|
|
6275
|
-
|
|
6384
|
+
// Helper method to get step title
|
|
6385
|
+
getStepTitle(step) {
|
|
6386
|
+
return step.action || step.title || '';
|
|
6387
|
+
}
|
|
6388
|
+
// Helper method to get step status
|
|
6389
|
+
getStepStatus(step) {
|
|
6390
|
+
const result = step.result;
|
|
6391
|
+
if (result) {
|
|
6392
|
+
const resultLower = result.toLowerCase();
|
|
6393
|
+
if (resultLower === 'success' || resultLower === 'passed') {
|
|
6394
|
+
return 'success';
|
|
6395
|
+
}
|
|
6396
|
+
else if (resultLower === 'failure' || resultLower === 'failed') {
|
|
6397
|
+
return 'failed';
|
|
6398
|
+
}
|
|
6399
|
+
else if (resultLower === 'pending' || resultLower === 'not-executed') {
|
|
6400
|
+
return 'pending';
|
|
6401
|
+
}
|
|
6402
|
+
else if (resultLower === 'running') {
|
|
6403
|
+
return 'running';
|
|
6404
|
+
}
|
|
6276
6405
|
}
|
|
6406
|
+
return step.status || 'pending';
|
|
6277
6407
|
}
|
|
6278
|
-
|
|
6279
|
-
|
|
6408
|
+
// Helper method to get step duration
|
|
6409
|
+
getStepDuration(step) {
|
|
6410
|
+
return step.duration || step.duration || 0;
|
|
6280
6411
|
}
|
|
6281
|
-
|
|
6282
|
-
|
|
6412
|
+
// Helper methods for loop step properties
|
|
6413
|
+
getLoopType(step) {
|
|
6414
|
+
const stepType = step.testStepType || step.type;
|
|
6415
|
+
if (stepType === 'FOR_LOOP' || step.loopType === 'for') {
|
|
6416
|
+
return 'for';
|
|
6417
|
+
}
|
|
6418
|
+
else if (stepType === 'WHILE_LOOP' || step.loopType === 'while') {
|
|
6419
|
+
return 'while';
|
|
6420
|
+
}
|
|
6421
|
+
return step.loopType;
|
|
6283
6422
|
}
|
|
6284
|
-
|
|
6285
|
-
|
|
6423
|
+
getLoopIterations(step) {
|
|
6424
|
+
const loopStep = step;
|
|
6425
|
+
return loopStep.iterations || [];
|
|
6286
6426
|
}
|
|
6287
|
-
|
|
6288
|
-
|
|
6427
|
+
getLoopNestedSteps(step) {
|
|
6428
|
+
const loopStep = step;
|
|
6429
|
+
return loopStep.nestedSteps || step.children || [];
|
|
6289
6430
|
}
|
|
6290
|
-
|
|
6291
|
-
|
|
6292
|
-
|
|
6431
|
+
// Helper methods for condition step properties
|
|
6432
|
+
getConditionStepDuration(step) {
|
|
6433
|
+
const duration = this.getStepDuration(step);
|
|
6434
|
+
if (this.convertMsToSecondsHandler) {
|
|
6435
|
+
return this.convertMsToSecondsHandler(duration);
|
|
6436
|
+
}
|
|
6437
|
+
return duration;
|
|
6293
6438
|
}
|
|
6294
|
-
|
|
6295
|
-
this.
|
|
6439
|
+
getConditionStepExpanded(step) {
|
|
6440
|
+
if (this.isStepExpandedHandler) {
|
|
6441
|
+
return this.isStepExpandedHandler(step);
|
|
6442
|
+
}
|
|
6443
|
+
return step.expanded || false;
|
|
6296
6444
|
}
|
|
6297
|
-
|
|
6298
|
-
|
|
6445
|
+
getConditionStepText(step) {
|
|
6446
|
+
return step.action || step.title || '';
|
|
6299
6447
|
}
|
|
6300
|
-
|
|
6301
|
-
this.
|
|
6448
|
+
getConditionStepBranches(step) {
|
|
6449
|
+
if (this.getConditionBranchesHandler) {
|
|
6450
|
+
return this.getConditionBranchesHandler(step);
|
|
6451
|
+
}
|
|
6452
|
+
return [];
|
|
6302
6453
|
}
|
|
6303
|
-
|
|
6304
|
-
this.
|
|
6454
|
+
getConditionStepLoading(step) {
|
|
6455
|
+
if (this.isStepLoadingHandler) {
|
|
6456
|
+
return this.isStepLoadingHandler(step);
|
|
6457
|
+
}
|
|
6458
|
+
return false;
|
|
6305
6459
|
}
|
|
6306
|
-
|
|
6307
|
-
this.
|
|
6460
|
+
handleConditionStepExpand(step) {
|
|
6461
|
+
if (this.onExpandHandler) {
|
|
6462
|
+
this.onExpandHandler(step);
|
|
6463
|
+
}
|
|
6308
6464
|
}
|
|
6309
|
-
|
|
6310
|
-
|
|
6311
|
-
|
|
6312
|
-
|
|
6313
|
-
|| Boolean(this.failureDetails?.logs?.length)) ||
|
|
6314
|
-
(Boolean(this.failureDetails?.aiFixApplied && (this.failureDetails?.aiFixMessage || this.confidence || this.reasoning?.length))));
|
|
6465
|
+
handleLoopStepExpand(step) {
|
|
6466
|
+
if (this.onExpandHandler) {
|
|
6467
|
+
this.onExpandHandler(step);
|
|
6468
|
+
}
|
|
6315
6469
|
}
|
|
6316
|
-
|
|
6317
|
-
|
|
6318
|
-
if (
|
|
6319
|
-
this.
|
|
6470
|
+
handleLoopStepIterationChange(step, iterationId) {
|
|
6471
|
+
// This would typically be handled by the parent component
|
|
6472
|
+
if (this.onExpandHandler) {
|
|
6473
|
+
this.onExpandHandler(step);
|
|
6474
|
+
}
|
|
6475
|
+
}
|
|
6476
|
+
getConditionStepFailureDetails(step) {
|
|
6477
|
+
if (this.formatFailureDetailsHandler) {
|
|
6478
|
+
return this.formatFailureDetailsHandler(step);
|
|
6479
|
+
}
|
|
6480
|
+
return undefined;
|
|
6481
|
+
}
|
|
6482
|
+
getConditionStepSelfHealAnalysis(step) {
|
|
6483
|
+
if (this.getSelfHealAnalysisHandler) {
|
|
6484
|
+
return this.getSelfHealAnalysisHandler(step);
|
|
6320
6485
|
}
|
|
6486
|
+
return undefined;
|
|
6487
|
+
}
|
|
6488
|
+
// Helper methods to safely access LoopStepConfig properties
|
|
6489
|
+
getLoopSelectedIterationId(step) {
|
|
6490
|
+
const loopStep = step;
|
|
6491
|
+
return loopStep.selectedIterationId;
|
|
6492
|
+
}
|
|
6493
|
+
getLoopDefaultIteration(step) {
|
|
6494
|
+
const loopStep = step;
|
|
6495
|
+
return loopStep.defaultIteration || 'last';
|
|
6496
|
+
}
|
|
6497
|
+
getLoopShowViewAllIterations(step) {
|
|
6498
|
+
const loopStep = step;
|
|
6499
|
+
return loopStep.showViewAllIterations;
|
|
6321
6500
|
}
|
|
6322
6501
|
}
|
|
6323
|
-
|
|
6324
|
-
ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isLoading: "isLoading", isUploadingBaseline: "isUploadingBaseline" }, outputs: { onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"toggleHeader()\">\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() === '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\n <!-- Condition 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=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && !isLoading\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\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 (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 && !isLoading\" 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 [timingBreakdown]=\"timingBreakdown\"\n [testStepResultId]=\"testStepResultId\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\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: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], 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"], 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type:
|
|
6502
|
+
StepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6503
|
+
StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getLoopIterationsHandler: "getLoopIterationsHandler", isUploadingBaseline: "isUploadingBaseline" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\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>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </div>\n\n <!-- Folder Icon -->\n <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Step group: {{ config.groupName }}\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Nested Steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n <ng-container *ngFor=\"let step of config.steps\">\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 [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [isUploadingBaseline]=\"isUploadingBaseline\">\n </cqa-step-renderer>\n </ng-container>\n </div>\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", "isUploadingBaseline", "getLoopIterationsHandler"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6504
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, decorators: [{
|
|
6326
6505
|
type: Component,
|
|
6327
|
-
args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"toggleHeader()\">\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() === '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\n <!-- Condition 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=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && !isLoading\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\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 (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 && !isLoading\" 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 [timingBreakdown]=\"timingBreakdown\"\n [testStepResultId]=\"testStepResultId\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6506
|
+
args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\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>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </div>\n\n <!-- Folder Icon -->\n <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Step group: {{ config.groupName }}\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Nested Steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n <ng-container *ngFor=\"let step of config.steps\">\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 [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [isUploadingBaseline]=\"isUploadingBaseline\">\n </cqa-step-renderer>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
6328
6507
|
}], propDecorators: { id: [{
|
|
6329
6508
|
type: Input
|
|
6330
6509
|
}], testStepResultId: [{
|
|
@@ -6341,35 +6520,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6341
6520
|
type: Input
|
|
6342
6521
|
}], expanded: [{
|
|
6343
6522
|
type: Input
|
|
6344
|
-
}],
|
|
6523
|
+
}], groupName: [{
|
|
6345
6524
|
type: Input
|
|
6346
|
-
}],
|
|
6525
|
+
}], steps: [{
|
|
6347
6526
|
type: Input
|
|
6348
|
-
}],
|
|
6527
|
+
}], onExpandHandler: [{
|
|
6349
6528
|
type: Input
|
|
6350
|
-
}],
|
|
6529
|
+
}], getConditionBranchesHandler: [{
|
|
6351
6530
|
type: Input
|
|
6352
|
-
}],
|
|
6531
|
+
}], isStepLoadingHandler: [{
|
|
6353
6532
|
type: Input
|
|
6354
|
-
}],
|
|
6533
|
+
}], isStepExpandedHandler: [{
|
|
6355
6534
|
type: Input
|
|
6356
|
-
}],
|
|
6535
|
+
}], convertMsToSecondsHandler: [{
|
|
6536
|
+
type: Input
|
|
6537
|
+
}], formatFailureDetailsHandler: [{
|
|
6538
|
+
type: Input
|
|
6539
|
+
}], getSelfHealAnalysisHandler: [{
|
|
6540
|
+
type: Input
|
|
6541
|
+
}], onMakeCurrentBaselineHandler: [{
|
|
6542
|
+
type: Input
|
|
6543
|
+
}], onUploadBaselineHandler: [{
|
|
6544
|
+
type: Input
|
|
6545
|
+
}], onAnalyzeHandler: [{
|
|
6546
|
+
type: Input
|
|
6547
|
+
}], onViewFullLogsHandler: [{
|
|
6548
|
+
type: Input
|
|
6549
|
+
}], onSelfHealActionHandler: [{
|
|
6550
|
+
type: Input
|
|
6551
|
+
}], getLoopIterationsHandler: [{
|
|
6357
6552
|
type: Input
|
|
6358
|
-
}], onBranchClickEvent: [{
|
|
6359
|
-
type: Output
|
|
6360
|
-
}], onExpand: [{
|
|
6361
|
-
type: Output
|
|
6362
6553
|
}], isUploadingBaseline: [{
|
|
6363
6554
|
type: Input
|
|
6364
|
-
}],
|
|
6365
|
-
type: Output
|
|
6366
|
-
}], uploadBaseline: [{
|
|
6367
|
-
type: Output
|
|
6368
|
-
}], analyze: [{
|
|
6369
|
-
type: Output
|
|
6370
|
-
}], viewFullLogs: [{
|
|
6371
|
-
type: Output
|
|
6372
|
-
}], selfHealAction: [{
|
|
6555
|
+
}], onExpand: [{
|
|
6373
6556
|
type: Output
|
|
6374
6557
|
}] } });
|
|
6375
6558
|
|
|
@@ -6394,6 +6577,8 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6394
6577
|
}
|
|
6395
6578
|
ngOnInit() {
|
|
6396
6579
|
// Build config from individual inputs
|
|
6580
|
+
// Use nestedSteps if provided, otherwise fall back to empty array
|
|
6581
|
+
const stepsToUse = this.nestedSteps || [];
|
|
6397
6582
|
this.config = {
|
|
6398
6583
|
id: this.id,
|
|
6399
6584
|
testStepResultId: this.testStepResultId,
|
|
@@ -6406,7 +6591,7 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6406
6591
|
iterations: this.iterations,
|
|
6407
6592
|
selectedIterationId: this.selectedIterationId,
|
|
6408
6593
|
defaultIteration: this.defaultIteration,
|
|
6409
|
-
nestedSteps:
|
|
6594
|
+
nestedSteps: stepsToUse,
|
|
6410
6595
|
showViewAllIterations: this.showViewAllIterations,
|
|
6411
6596
|
timingBreakdown: this.timingBreakdown,
|
|
6412
6597
|
expanded: this.expanded,
|
|
@@ -6425,6 +6610,10 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6425
6610
|
}
|
|
6426
6611
|
else if (this.iterations && this.iterations.length > 0) {
|
|
6427
6612
|
this.selectDefaultIteration();
|
|
6613
|
+
// If defaultIteration is 'last', also set userSelectedIterationId to the last iteration
|
|
6614
|
+
if (this.defaultIteration === 'last' && this.selectedIteration) {
|
|
6615
|
+
this.userSelectedIterationId = this.selectedIteration.id;
|
|
6616
|
+
}
|
|
6428
6617
|
}
|
|
6429
6618
|
}
|
|
6430
6619
|
ngOnChanges(changes) {
|
|
@@ -6497,6 +6686,20 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6497
6686
|
if (this.config) {
|
|
6498
6687
|
this.config.iterations = this.iterations;
|
|
6499
6688
|
this.config.selectedIterationId = this.selectedIterationId;
|
|
6689
|
+
this.config.nestedSteps = this.nestedSteps || [];
|
|
6690
|
+
}
|
|
6691
|
+
}
|
|
6692
|
+
// Also handle when nestedSteps is passed via children property (for step-renderer compatibility)
|
|
6693
|
+
if (changes['nestedSteps'] && this.nestedSteps) {
|
|
6694
|
+
// Ensure config is updated with nestedSteps
|
|
6695
|
+
if (this.config) {
|
|
6696
|
+
this.config.nestedSteps = this.nestedSteps;
|
|
6697
|
+
}
|
|
6698
|
+
}
|
|
6699
|
+
// If nestedSteps is not provided but children is (from step-renderer), use children
|
|
6700
|
+
if (!this.nestedSteps && this.config.children && Array.isArray(this.config.children)) {
|
|
6701
|
+
this.nestedSteps = this.config.children;
|
|
6702
|
+
if (this.config) {
|
|
6500
6703
|
this.config.nestedSteps = this.nestedSteps;
|
|
6501
6704
|
}
|
|
6502
6705
|
}
|
|
@@ -6507,6 +6710,28 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6507
6710
|
// Emit event when expanding (transitioning from collapsed to expanded)
|
|
6508
6711
|
if (!wasExpanded && this.isExpanded) {
|
|
6509
6712
|
this.onExpand.emit();
|
|
6713
|
+
// If this step has children (hasChild is true) and onExpandHandler is provided, call it to fetch children
|
|
6714
|
+
if (this.onExpandHandler && this.config) {
|
|
6715
|
+
const hasChild = this.config.hasChild ||
|
|
6716
|
+
((this.config.nestedSteps?.length === 0 || !this.config.nestedSteps) && this.testStepResultId);
|
|
6717
|
+
if (hasChild) {
|
|
6718
|
+
// Create a step config object for the handler with hasChild property
|
|
6719
|
+
const stepConfig = {
|
|
6720
|
+
...this.config,
|
|
6721
|
+
hasChild: true,
|
|
6722
|
+
expanded: true,
|
|
6723
|
+
testStepType: this.config.testStepType || (this.loopType === 'for' ? 'FOR_LOOP' : 'WHILE_LOOP'),
|
|
6724
|
+
children: this.config.nestedSteps || [],
|
|
6725
|
+
testStepResultId: this.testStepResultId,
|
|
6726
|
+
id: this.id
|
|
6727
|
+
};
|
|
6728
|
+
this.onExpandHandler(stepConfig);
|
|
6729
|
+
}
|
|
6730
|
+
}
|
|
6731
|
+
}
|
|
6732
|
+
// Ensure expanded state is synced with config
|
|
6733
|
+
if (this.config) {
|
|
6734
|
+
this.config.expanded = this.isExpanded;
|
|
6510
6735
|
}
|
|
6511
6736
|
}
|
|
6512
6737
|
selectDefaultIteration() {
|
|
@@ -6528,10 +6753,16 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6528
6753
|
}
|
|
6529
6754
|
// Apply default based on defaultIteration setting
|
|
6530
6755
|
if (this.defaultIteration === 'last' && this.iterations.length > 0) {
|
|
6531
|
-
|
|
6756
|
+
const lastIteration = this.iterations[this.iterations.length - 1];
|
|
6757
|
+
this.selectedIteration = lastIteration;
|
|
6758
|
+
// Set userSelectedIterationId to track the default selection
|
|
6759
|
+
this.userSelectedIterationId = lastIteration.id;
|
|
6532
6760
|
}
|
|
6533
6761
|
else if (this.iterations.length > 0) {
|
|
6534
|
-
|
|
6762
|
+
const firstIteration = this.iterations[0];
|
|
6763
|
+
this.selectedIteration = firstIteration;
|
|
6764
|
+
// Set userSelectedIterationId to track the default selection
|
|
6765
|
+
this.userSelectedIterationId = firstIteration.id;
|
|
6535
6766
|
}
|
|
6536
6767
|
}
|
|
6537
6768
|
handleIterationChange(iteration) {
|
|
@@ -6615,6 +6846,46 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6615
6846
|
stepType === 'CONDITION_ELSE_IF' || stepType === 'CONDITION_ELSEIF' ||
|
|
6616
6847
|
stepType === 'condition';
|
|
6617
6848
|
}
|
|
6849
|
+
// Helper method to check if a step is a loop step
|
|
6850
|
+
isNestedLoopStep(step) {
|
|
6851
|
+
const stepType = step.testStepType || step.type;
|
|
6852
|
+
return stepType === 'FOR_LOOP' || stepType === 'WHILE_LOOP' || stepType === 'loop';
|
|
6853
|
+
}
|
|
6854
|
+
// Helper method to get loop type from step config
|
|
6855
|
+
getLoopType(step) {
|
|
6856
|
+
const stepType = step.testStepType || step.type;
|
|
6857
|
+
if (stepType === 'FOR_LOOP' || step.loopType === 'for') {
|
|
6858
|
+
return 'for';
|
|
6859
|
+
}
|
|
6860
|
+
else if (stepType === 'WHILE_LOOP' || step.loopType === 'while') {
|
|
6861
|
+
return 'while';
|
|
6862
|
+
}
|
|
6863
|
+
return step.loopType;
|
|
6864
|
+
}
|
|
6865
|
+
// Helper method to get iterations from step config
|
|
6866
|
+
getLoopIterations(step) {
|
|
6867
|
+
const loopStep = step;
|
|
6868
|
+
return loopStep.iterations || [];
|
|
6869
|
+
}
|
|
6870
|
+
// Helper method to get nested steps from loop step config
|
|
6871
|
+
getLoopNestedSteps(step) {
|
|
6872
|
+
const loopStep = step;
|
|
6873
|
+
return loopStep.nestedSteps || step.children || [];
|
|
6874
|
+
}
|
|
6875
|
+
// Helper method to handle nested loop step expansion
|
|
6876
|
+
handleLoopStepExpand(step) {
|
|
6877
|
+
if (this.onExpandHandler) {
|
|
6878
|
+
this.onExpandHandler(step);
|
|
6879
|
+
}
|
|
6880
|
+
}
|
|
6881
|
+
// Helper method to handle nested loop step iteration change
|
|
6882
|
+
handleLoopStepIterationChange(step, iterationId) {
|
|
6883
|
+
// This would typically be handled by the parent component
|
|
6884
|
+
// For now, we just emit the expand event
|
|
6885
|
+
if (this.onExpandHandler) {
|
|
6886
|
+
this.onExpandHandler(step);
|
|
6887
|
+
}
|
|
6888
|
+
}
|
|
6618
6889
|
// Helper method to get step title
|
|
6619
6890
|
getStepTitle(step) {
|
|
6620
6891
|
return step.action || step.title || '';
|
|
@@ -6714,12 +6985,25 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6714
6985
|
this.onViewFullLogsHandler();
|
|
6715
6986
|
}
|
|
6716
6987
|
}
|
|
6988
|
+
// Helper methods to safely access LoopStepConfig properties
|
|
6989
|
+
getLoopSelectedIterationId(step) {
|
|
6990
|
+
const loopStep = step;
|
|
6991
|
+
return loopStep.selectedIterationId;
|
|
6992
|
+
}
|
|
6993
|
+
getLoopDefaultIteration(step) {
|
|
6994
|
+
const loopStep = step;
|
|
6995
|
+
return loopStep.defaultIteration || 'last';
|
|
6996
|
+
}
|
|
6997
|
+
getLoopShowViewAllIterations(step) {
|
|
6998
|
+
const loopStep = step;
|
|
6999
|
+
return loopStep.showViewAllIterations;
|
|
7000
|
+
}
|
|
6717
7001
|
}
|
|
6718
7002
|
LoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6719
|
-
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", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", selfHealAnalysis: "selfHealAnalysis" }, 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>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </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\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\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 </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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]\">\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\" 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 <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\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" 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 <ng-container *ngFor=\"let step of config.nestedSteps\">\n <!-- For nested step groups with hasChild, render directly with onExpand handler -->\n <cqa-step-group \n *ngIf=\"isNestedStepGroupWithChildren(step) && onExpandHandler\"\n [id]=\"step.id\"\n [testStepResultId]=\"step.testStepResultId\"\n [stepNumber]=\"step.stepNumber\"\n [title]=\"getStepTitle(step)\"\n [status]=\"getStepStatus(step)\"\n [duration]=\"convertMsToSecondsHandler ? convertMsToSecondsHandler(getStepDuration(step)) : getStepDuration(step)\"\n [expanded]=\"isStepExpandedHandler ? isStepExpandedHandler(step) : step.expanded\"\n [groupName]=\"getGroupName(step)\"\n [steps]=\"getSteps(step)\"\n [timingBreakdown]=\"step.timingBreakdown\"\n [onExpandHandler]=\"onExpandHandler\"\n (onExpand)=\"onExpandHandler && onExpandHandler(step)\">\n </cqa-step-group>\n <!-- For nested condition steps, render directly with condition-step component -->\n <cqa-condition-step\n *ngIf=\"isNestedConditionStep(step) && getConditionBranchesHandler\"\n [id]=\"step.id\"\n [testStepResultId]=\"step.testStepResultId\"\n [stepNumber]=\"step.stepNumber\"\n [title]=\"getStepTitle(step)\"\n [status]=\"getStepStatus(step)\"\n [duration]=\"getConditionStepDuration(step)\"\n [expanded]=\"getConditionStepExpanded(step)\"\n [conditionText]=\"getConditionStepText(step)\"\n [branches]=\"getConditionStepBranches(step)\"\n [isLoading]=\"getConditionStepLoading(step)\"\n (onExpand)=\"handleConditionStepExpand(step)\"\n [failureDetails]=\"getConditionStepFailureDetails(step)\"\n [selfHealAnalysis]=\"getConditionStepSelfHealAnalysis(step)\"\n (selfHealAction)=\"handleConditionStepSelfHealAction($event)\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"handleConditionStepMakeBaseline($event)\"\n (uploadBaseline)=\"handleConditionStepUploadBaseline($event)\"\n (analyze)=\"handleConditionStepAnalyze()\"\n (viewFullLogs)=\"handleConditionStepViewLogs()\">\n </cqa-condition-step>\n <!-- For other step types, use step-renderer -->\n <cqa-step-renderer \n *ngIf=\"!isNestedStepGroupWithChildren(step) && !isNestedConditionStep(step)\" \n [step]=\"step\">\n </cqa-step-renderer>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] 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 (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 (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: StepGroupComponent, selector: "cqa-step-group", inputs: ["id", "testStepResultId", "stepNumber", "title", "status", "duration", "timingBreakdown", "expanded", "groupName", "steps", "onExpandHandler"], outputs: ["onExpand"] }, { type: ConditionStepComponent, selector: "cqa-condition-step", inputs: ["id", "testStepResultId", "stepNumber", "title", "status", "duration", "timingBreakdown", "expanded", "conditionText", "branches", "failureDetails", "reasoning", "confidence", "selfHealAnalysis", "isLoading", "isUploadingBaseline"], outputs: ["onBranchClickEvent", "onExpand", "makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs", "selfHealAction"] }, { type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], 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"], 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"] }] });
|
|
7003
|
+
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", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getLoopIterationsHandler: "getLoopIterationsHandler", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", selfHealAnalysis: "selfHealAnalysis" }, 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>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </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\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\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 </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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]\">\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\" 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 <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\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" 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 <ng-container *ngFor=\"let step of config.nestedSteps\">\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 [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [isUploadingBaseline]=\"isUploadingBaseline\">\n </cqa-step-renderer>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] 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 (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 (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", "isUploadingBaseline", "getLoopIterationsHandler"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], 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"], 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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
6720
7004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, decorators: [{
|
|
6721
7005
|
type: Component,
|
|
6722
|
-
args: [{ selector: 'cqa-loop-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)=\"toggleHeader()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </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\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\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 </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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]\">\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\" 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 <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\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" 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 <ng-container *ngFor=\"let step of config.nestedSteps\">\n <!-- For nested step groups with hasChild, render directly with onExpand handler -->\n <cqa-step-group \n *ngIf=\"isNestedStepGroupWithChildren(step) && onExpandHandler\"\n [id]=\"step.id\"\n [testStepResultId]=\"step.testStepResultId\"\n [stepNumber]=\"step.stepNumber\"\n [title]=\"getStepTitle(step)\"\n [status]=\"getStepStatus(step)\"\n [duration]=\"convertMsToSecondsHandler ? convertMsToSecondsHandler(getStepDuration(step)) : getStepDuration(step)\"\n [expanded]=\"isStepExpandedHandler ? isStepExpandedHandler(step) : step.expanded\"\n [groupName]=\"getGroupName(step)\"\n [steps]=\"getSteps(step)\"\n [timingBreakdown]=\"step.timingBreakdown\"\n [onExpandHandler]=\"onExpandHandler\"\n (onExpand)=\"onExpandHandler && onExpandHandler(step)\">\n </cqa-step-group>\n <!-- For nested condition steps, render directly with condition-step component -->\n <cqa-condition-step\n *ngIf=\"isNestedConditionStep(step) && getConditionBranchesHandler\"\n [id]=\"step.id\"\n [testStepResultId]=\"step.testStepResultId\"\n [stepNumber]=\"step.stepNumber\"\n [title]=\"getStepTitle(step)\"\n [status]=\"getStepStatus(step)\"\n [duration]=\"getConditionStepDuration(step)\"\n [expanded]=\"getConditionStepExpanded(step)\"\n [conditionText]=\"getConditionStepText(step)\"\n [branches]=\"getConditionStepBranches(step)\"\n [isLoading]=\"getConditionStepLoading(step)\"\n (onExpand)=\"handleConditionStepExpand(step)\"\n [failureDetails]=\"getConditionStepFailureDetails(step)\"\n [selfHealAnalysis]=\"getConditionStepSelfHealAnalysis(step)\"\n (selfHealAction)=\"handleConditionStepSelfHealAction($event)\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"handleConditionStepMakeBaseline($event)\"\n (uploadBaseline)=\"handleConditionStepUploadBaseline($event)\"\n (analyze)=\"handleConditionStepAnalyze()\"\n (viewFullLogs)=\"handleConditionStepViewLogs()\">\n </cqa-condition-step>\n <!-- For other step types, use step-renderer -->\n <cqa-step-renderer \n *ngIf=\"!isNestedStepGroupWithChildren(step) && !isNestedConditionStep(step)\" \n [step]=\"step\">\n </cqa-step-renderer>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] 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 (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 (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
7006
|
+
args: [{ selector: 'cqa-loop-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)=\"toggleHeader()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.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=\"config.status.toLowerCase() === 'failure'\" 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=\"config.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=\"config.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 </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\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\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 </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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]\">\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\" 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 <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\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" 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 <ng-container *ngFor=\"let step of config.nestedSteps\">\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 [onExpandHandler]=\"onExpandHandler\"\n [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n [isStepLoadingHandler]=\"isStepLoadingHandler\"\n [isStepExpandedHandler]=\"isStepExpandedHandler\"\n [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n [onAnalyzeHandler]=\"onAnalyzeHandler\"\n [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n [isUploadingBaseline]=\"isUploadingBaseline\">\n </cqa-step-renderer>\n </ng-container>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] 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 (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 (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6723
7007
|
}], propDecorators: { id: [{
|
|
6724
7008
|
type: Input
|
|
6725
7009
|
}], testStepResultId: [{
|
|
@@ -6772,6 +7056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6772
7056
|
type: Input
|
|
6773
7057
|
}], onSelfHealActionHandler: [{
|
|
6774
7058
|
type: Input
|
|
7059
|
+
}], getLoopIterationsHandler: [{
|
|
7060
|
+
type: Input
|
|
6775
7061
|
}], failureDetails: [{
|
|
6776
7062
|
type: Input
|
|
6777
7063
|
}], reasoning: [{
|
|
@@ -6800,6 +7086,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6800
7086
|
type: Output
|
|
6801
7087
|
}] } });
|
|
6802
7088
|
|
|
7089
|
+
class ConditionStepComponent extends BaseStepComponent {
|
|
7090
|
+
constructor() {
|
|
7091
|
+
super(...arguments);
|
|
7092
|
+
this.onBranchClickEvent = new EventEmitter();
|
|
7093
|
+
this.onExpand = new EventEmitter();
|
|
7094
|
+
this.isUploadingBaseline = {};
|
|
7095
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
7096
|
+
this.uploadBaseline = new EventEmitter();
|
|
7097
|
+
this.analyze = new EventEmitter();
|
|
7098
|
+
this.viewFullLogs = new EventEmitter();
|
|
7099
|
+
this.selfHealAction = new EventEmitter();
|
|
7100
|
+
this.showFailedStepDetails = false;
|
|
7101
|
+
}
|
|
7102
|
+
ngOnInit() {
|
|
7103
|
+
// Build config from individual inputs
|
|
7104
|
+
this.config = {
|
|
7105
|
+
id: this.id,
|
|
7106
|
+
testStepResultId: this.testStepResultId,
|
|
7107
|
+
stepNumber: this.stepNumber,
|
|
7108
|
+
title: this.title,
|
|
7109
|
+
status: this.status,
|
|
7110
|
+
duration: this.duration,
|
|
7111
|
+
type: 'condition',
|
|
7112
|
+
conditionText: this.conditionText,
|
|
7113
|
+
branches: this.branches,
|
|
7114
|
+
timingBreakdown: this.timingBreakdown,
|
|
7115
|
+
expanded: this.expanded,
|
|
7116
|
+
};
|
|
7117
|
+
super.ngOnInit();
|
|
7118
|
+
}
|
|
7119
|
+
toggle() {
|
|
7120
|
+
const wasExpanded = this.isExpanded;
|
|
7121
|
+
super.toggle();
|
|
7122
|
+
if (!wasExpanded && this.isExpanded) {
|
|
7123
|
+
this.onExpand.emit();
|
|
7124
|
+
// Note: Condition steps typically don't have nested children that need fetching
|
|
7125
|
+
// But if needed, we can add similar logic here
|
|
7126
|
+
}
|
|
7127
|
+
}
|
|
7128
|
+
getExecutedBranch() {
|
|
7129
|
+
return this.branches.find(branch => branch.executed) || null;
|
|
7130
|
+
}
|
|
7131
|
+
getUnexecutedBranches() {
|
|
7132
|
+
return this.branches.filter(branch => !branch.executed);
|
|
7133
|
+
}
|
|
7134
|
+
getSubStepIndex(subSteps, subStep) {
|
|
7135
|
+
return subSteps.indexOf(subStep) + 1;
|
|
7136
|
+
}
|
|
7137
|
+
onViewMoreFailedStepClick(expanded) {
|
|
7138
|
+
this.showFailedStepDetails = expanded;
|
|
7139
|
+
}
|
|
7140
|
+
getSubStepsForFailedStep() {
|
|
7141
|
+
const executedBranch = this.getExecutedBranch();
|
|
7142
|
+
return executedBranch?.subSteps || [];
|
|
7143
|
+
}
|
|
7144
|
+
onMakeCurrentBaseline(event) {
|
|
7145
|
+
this.makeCurrentBaseline.emit(event);
|
|
7146
|
+
}
|
|
7147
|
+
onUploadBaseline(event) {
|
|
7148
|
+
this.uploadBaseline.emit(event);
|
|
7149
|
+
}
|
|
7150
|
+
onAnalyze() {
|
|
7151
|
+
this.analyze.emit();
|
|
7152
|
+
}
|
|
7153
|
+
onViewFullLogs() {
|
|
7154
|
+
this.viewFullLogs.emit();
|
|
7155
|
+
}
|
|
7156
|
+
onSelfHealAction(event) {
|
|
7157
|
+
this.selfHealAction.emit(event);
|
|
7158
|
+
}
|
|
7159
|
+
get showViewMoreButton() {
|
|
7160
|
+
return this.isExpanded && Boolean(this.failureDetails) &&
|
|
7161
|
+
((Boolean(this.failureDetails?.expected || this.failureDetails?.actual)) ||
|
|
7162
|
+
(Boolean(this.failureDetails?.screenshots?.current || this.failureDetails?.screenshots?.baseline || this.failureDetails?.screenshots?.difference)
|
|
7163
|
+
|| Boolean(this.failureDetails?.logs?.length)) ||
|
|
7164
|
+
(Boolean(this.failureDetails?.aiFixApplied && (this.failureDetails?.aiFixMessage || this.confidence || this.reasoning?.length))));
|
|
7165
|
+
}
|
|
7166
|
+
toggleHeader() {
|
|
7167
|
+
this.toggle();
|
|
7168
|
+
if (!this.isExpanded) {
|
|
7169
|
+
this.showFailedStepDetails = false;
|
|
7170
|
+
}
|
|
7171
|
+
}
|
|
7172
|
+
}
|
|
7173
|
+
ConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7174
|
+
ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isLoading: "isLoading", isUploadingBaseline: "isUploadingBaseline" }, outputs: { onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"toggleHeader()\">\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() === '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\n <!-- Condition 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=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && !isLoading\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\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 (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 && !isLoading\" 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 [timingBreakdown]=\"timingBreakdown\"\n [testStepResultId]=\"testStepResultId\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\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: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], 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"], 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, decorators: [{
|
|
7176
|
+
type: Component,
|
|
7177
|
+
args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"toggleHeader()\">\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() === '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\n <!-- Condition 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=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] 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 <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && !isLoading\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\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 (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 && !isLoading\" 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 [timingBreakdown]=\"timingBreakdown\"\n [testStepResultId]=\"testStepResultId\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
7178
|
+
}], propDecorators: { id: [{
|
|
7179
|
+
type: Input
|
|
7180
|
+
}], testStepResultId: [{
|
|
7181
|
+
type: Input
|
|
7182
|
+
}], stepNumber: [{
|
|
7183
|
+
type: Input
|
|
7184
|
+
}], title: [{
|
|
7185
|
+
type: Input
|
|
7186
|
+
}], status: [{
|
|
7187
|
+
type: Input
|
|
7188
|
+
}], duration: [{
|
|
7189
|
+
type: Input
|
|
7190
|
+
}], timingBreakdown: [{
|
|
7191
|
+
type: Input
|
|
7192
|
+
}], expanded: [{
|
|
7193
|
+
type: Input
|
|
7194
|
+
}], conditionText: [{
|
|
7195
|
+
type: Input
|
|
7196
|
+
}], branches: [{
|
|
7197
|
+
type: Input
|
|
7198
|
+
}], failureDetails: [{
|
|
7199
|
+
type: Input
|
|
7200
|
+
}], reasoning: [{
|
|
7201
|
+
type: Input
|
|
7202
|
+
}], confidence: [{
|
|
7203
|
+
type: Input
|
|
7204
|
+
}], selfHealAnalysis: [{
|
|
7205
|
+
type: Input
|
|
7206
|
+
}], isLoading: [{
|
|
7207
|
+
type: Input
|
|
7208
|
+
}], onBranchClickEvent: [{
|
|
7209
|
+
type: Output
|
|
7210
|
+
}], onExpand: [{
|
|
7211
|
+
type: Output
|
|
7212
|
+
}], isUploadingBaseline: [{
|
|
7213
|
+
type: Input
|
|
7214
|
+
}], makeCurrentBaseline: [{
|
|
7215
|
+
type: Output
|
|
7216
|
+
}], uploadBaseline: [{
|
|
7217
|
+
type: Output
|
|
7218
|
+
}], analyze: [{
|
|
7219
|
+
type: Output
|
|
7220
|
+
}], viewFullLogs: [{
|
|
7221
|
+
type: Output
|
|
7222
|
+
}], selfHealAction: [{
|
|
7223
|
+
type: Output
|
|
7224
|
+
}] } });
|
|
7225
|
+
|
|
6803
7226
|
class FailedStepComponent extends BaseStepComponent {
|
|
6804
7227
|
constructor() {
|
|
6805
7228
|
super(...arguments);
|
|
@@ -7444,7 +7867,7 @@ class LiveExecutionStepComponent extends BaseStepComponent {
|
|
|
7444
7867
|
}
|
|
7445
7868
|
}
|
|
7446
7869
|
LiveExecutionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7447
|
-
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" }, 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 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'\" 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 </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[10px] 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\" 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 </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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 *ngIf=\"subStep.duration\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1$
|
|
7870
|
+
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" }, 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 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'\" 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 </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[10px] 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\" 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 </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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 *ngIf=\"subStep.duration\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1$4.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"] }] });
|
|
7448
7871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, decorators: [{
|
|
7449
7872
|
type: Component,
|
|
7450
7873
|
args: [{ selector: 'cqa-live-execution-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 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'\" 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 </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[10px] 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\" 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 </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\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 *ngIf=\"subStep.duration\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -7853,12 +8276,12 @@ class SimulatorComponent {
|
|
|
7853
8276
|
this.segments = baseSegments;
|
|
7854
8277
|
}
|
|
7855
8278
|
}
|
|
7856
|
-
SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$
|
|
8279
|
+
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 });
|
|
7857
8280
|
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", selectedView: "selectedView" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayer", 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\">\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\">{{ platformName }}</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 <!-- 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\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=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n [src]=\"videoUrl\"\n type=\"video/webm\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\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=\"!videoUrl\">\n No video recording found\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\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 <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 <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-green-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-green-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: 10;\"\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 <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n />\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-py-4 cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\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-black\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n height=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\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: i4$1.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7858
8281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
|
|
7859
8282
|
type: Component,
|
|
7860
8283
|
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\">\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\">{{ platformName }}</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 <!-- 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\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=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n [src]=\"videoUrl\"\n type=\"video/webm\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\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=\"!videoUrl\">\n No video recording found\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\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 <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 <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-green-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-green-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: 10;\"\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 <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n />\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-py-4 cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\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-black\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n height=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\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: [] }]
|
|
7861
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8284
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoUrl: [{
|
|
7862
8285
|
type: Input
|
|
7863
8286
|
}], videoCurrentDuration: [{
|
|
7864
8287
|
type: Input
|
|
@@ -8714,12 +9137,12 @@ class CompareRunsComponent {
|
|
|
8714
9137
|
return labels[this.selectedRunB.result] || this.selectedRunB.result;
|
|
8715
9138
|
}
|
|
8716
9139
|
}
|
|
8717
|
-
CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token:
|
|
9140
|
+
CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i6.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8718
9141
|
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: block; width: 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 *ngIf=\"selectedRunA\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runAStatusBgColor\"\n [style.border-color]=\"runAStatusBorderColor\">\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 </div>\n \n <div *ngIf=\"selectedRunB\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runBStatusBgColor\"\n [style.border-color]=\"runBStatusBorderColor\">\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 </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-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" 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-[#E17100]\">{{ 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 <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=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" 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-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n <cqa-table-template\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", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8719
9142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
|
|
8720
9143
|
type: Component,
|
|
8721
9144
|
args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 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 *ngIf=\"selectedRunA\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runAStatusBgColor\"\n [style.border-color]=\"runAStatusBorderColor\">\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 </div>\n \n <div *ngIf=\"selectedRunB\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runBStatusBgColor\"\n [style.border-color]=\"runBStatusBorderColor\">\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 </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-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" 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-[#E17100]\">{{ 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 <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=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" 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-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n <cqa-table-template\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: [] }]
|
|
8722
|
-
}], ctorParameters: function () { return [{ type:
|
|
9145
|
+
}], ctorParameters: function () { return [{ type: i6.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
|
|
8723
9146
|
type: Input
|
|
8724
9147
|
}], comparisonData: [{
|
|
8725
9148
|
type: Input
|
|
@@ -9972,14 +10395,14 @@ class DialogService {
|
|
|
9972
10395
|
});
|
|
9973
10396
|
}
|
|
9974
10397
|
}
|
|
9975
|
-
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$
|
|
10398
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9976
10399
|
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, providedIn: 'root' });
|
|
9977
10400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, decorators: [{
|
|
9978
10401
|
type: Injectable,
|
|
9979
10402
|
args: [{
|
|
9980
10403
|
providedIn: 'root',
|
|
9981
10404
|
}]
|
|
9982
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
10405
|
+
}], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
|
|
9983
10406
|
|
|
9984
10407
|
/**
|
|
9985
10408
|
* Generated bundle index. Do not edit.
|