@cqa-lib/cqa-ui 1.1.156 → 1.1.158
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/visual-comparison/visual-comparison.component.mjs +27 -14
- package/esm2020/lib/simulator/simulator.component.mjs +9 -3
- package/esm2020/lib/ui-kit.module.mjs +5 -1
- package/esm2020/lib/utils/tw-overlay-container.mjs +7 -3
- package/esm2020/lib/visual-difference-modal/visual-difference-modal.component.mjs +23 -51
- package/fesm2015/cqa-lib-cqa-ui.mjs +71 -71
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +68 -71
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/visual-comparison/visual-comparison.component.d.ts +3 -5
- package/lib/simulator/simulator.component.d.ts +3 -1
- package/lib/ui-kit.module.d.ts +5 -4
- package/lib/visual-difference-modal/visual-difference-modal.component.d.ts +16 -8
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -21,15 +21,17 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
|
21
21
|
import * as i4 from '@angular/material/radio';
|
|
22
22
|
import { MatRadioModule } from '@angular/material/radio';
|
|
23
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
|
-
import * as i1$
|
|
24
|
+
import * as i1$5 from '@angular/material/progress-spinner';
|
|
25
25
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
26
26
|
import * as i2 from '@angular/material/tooltip';
|
|
27
27
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
28
|
-
import * as i1$
|
|
28
|
+
import * as i1$4 from '@angular/material/dialog';
|
|
29
|
+
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
30
|
+
import * as i1$7 from '@angular/cdk/overlay';
|
|
29
31
|
import { OverlayContainer, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
30
32
|
import * as i3 from '@angular/cdk/portal';
|
|
31
33
|
import { TemplatePortal, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
|
|
32
|
-
import * as i1$
|
|
34
|
+
import * as i1$6 from 'ngx-typed-js';
|
|
33
35
|
import { NgxTypedJsModule } from 'ngx-typed-js';
|
|
34
36
|
import { __awaiter } from 'tslib';
|
|
35
37
|
import * as i1$1 from '@angular/platform-browser';
|
|
@@ -5604,14 +5606,18 @@ class TailwindOverlayContainer extends OverlayContainer {
|
|
|
5604
5606
|
const paneHasLibraryClass = pane.classList.contains('cqa-dialog-panel') ||
|
|
5605
5607
|
pane.classList.contains('cqa-dialog-backdrop') ||
|
|
5606
5608
|
pane.classList.contains('ctc-select-panel') ||
|
|
5607
|
-
pane.classList.contains('ctc-date-range-panel')
|
|
5609
|
+
pane.classList.contains('ctc-date-range-panel') ||
|
|
5610
|
+
pane.classList.contains('visual-difference-dialog');
|
|
5608
5611
|
// Also check for library components inside the pane
|
|
5609
5612
|
// These classes may be on child elements rather than the pane itself
|
|
5610
5613
|
const hasLibraryDialogInside = pane.querySelector('.cqa-dialog-panel') !== null;
|
|
5611
5614
|
const hasLibrarySelectInside = pane.querySelector('.ctc-select-panel') !== null;
|
|
5612
5615
|
const hasLibraryDatePickerInside = pane.querySelector('.ctc-date-range-panel') !== null;
|
|
5616
|
+
const hasVisualDifferenceDialogInside = pane.querySelector('.visual-difference-dialog') !== null ||
|
|
5617
|
+
pane.querySelector('.cqa-visual-difference-modal') !== null;
|
|
5613
5618
|
const isLibraryOverlay = paneHasLibraryClass || hasLibraryDialogInside ||
|
|
5614
|
-
hasLibrarySelectInside || hasLibraryDatePickerInside
|
|
5619
|
+
hasLibrarySelectInside || hasLibraryDatePickerInside ||
|
|
5620
|
+
hasVisualDifferenceDialogInside;
|
|
5615
5621
|
if (isLibraryOverlay) {
|
|
5616
5622
|
// This is a library overlay - add the class
|
|
5617
5623
|
pane.classList.add('cqa-ui-root');
|
|
@@ -7156,36 +7162,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
7156
7162
|
}] } });
|
|
7157
7163
|
|
|
7158
7164
|
class VisualDifferenceModalComponent {
|
|
7159
|
-
constructor() {
|
|
7165
|
+
constructor(dialogRef, data) {
|
|
7166
|
+
this.dialogRef = dialogRef;
|
|
7167
|
+
this.data = data;
|
|
7160
7168
|
this.baselineUrl = '';
|
|
7161
7169
|
this.currentUrl = '';
|
|
7162
7170
|
this.differenceUrl = '';
|
|
7163
7171
|
this.title = 'Visual Difference';
|
|
7164
7172
|
this.subtitle = 'Comparing Baseline vs. Current Execution';
|
|
7165
|
-
this.isOpen = false;
|
|
7166
|
-
this.initialView = 'baseline';
|
|
7167
|
-
this.close = new EventEmitter();
|
|
7168
7173
|
this.currentView = 'baseline';
|
|
7169
7174
|
this.baselineImageError = false;
|
|
7170
7175
|
this.currentImageError = false;
|
|
7171
7176
|
this.differenceImageError = false;
|
|
7172
7177
|
}
|
|
7173
|
-
|
|
7174
|
-
|
|
7175
|
-
|
|
7176
|
-
|
|
7177
|
-
|
|
7178
|
-
|
|
7179
|
-
|
|
7180
|
-
if (changes['differenceUrl']) {
|
|
7181
|
-
this.differenceImageError = false;
|
|
7182
|
-
}
|
|
7183
|
-
if (changes['isOpen'] && this.isOpen) {
|
|
7184
|
-
this.currentView = this.initialView;
|
|
7185
|
-
}
|
|
7186
|
-
if (changes['initialView'] && this.isOpen) {
|
|
7187
|
-
this.currentView = this.initialView;
|
|
7188
|
-
}
|
|
7178
|
+
ngOnInit() {
|
|
7179
|
+
this.baselineUrl = this.data.baselineUrl || '';
|
|
7180
|
+
this.currentUrl = this.data.currentUrl || '';
|
|
7181
|
+
this.differenceUrl = this.data.differenceUrl || '';
|
|
7182
|
+
this.title = this.data.title || 'Visual Difference';
|
|
7183
|
+
this.subtitle = this.data.subtitle || 'Comparing Baseline vs. Current Execution';
|
|
7184
|
+
this.currentView = this.data.initialView || 'baseline';
|
|
7189
7185
|
}
|
|
7190
7186
|
get currentImageUrl() {
|
|
7191
7187
|
switch (this.currentView) {
|
|
@@ -7200,14 +7196,7 @@ class VisualDifferenceModalComponent {
|
|
|
7200
7196
|
}
|
|
7201
7197
|
}
|
|
7202
7198
|
onClose() {
|
|
7203
|
-
this.close
|
|
7204
|
-
}
|
|
7205
|
-
onBackdropClick(event) {
|
|
7206
|
-
const target = event.target;
|
|
7207
|
-
const currentTarget = event.currentTarget;
|
|
7208
|
-
if (target === currentTarget || target.classList.contains('modal-backdrop')) {
|
|
7209
|
-
this.onClose();
|
|
7210
|
-
}
|
|
7199
|
+
this.dialogRef.close();
|
|
7211
7200
|
}
|
|
7212
7201
|
onImageError(event) {
|
|
7213
7202
|
const img = event.target;
|
|
@@ -7254,32 +7243,22 @@ class VisualDifferenceModalComponent {
|
|
|
7254
7243
|
this.currentView = views[nextIndex];
|
|
7255
7244
|
}
|
|
7256
7245
|
}
|
|
7257
|
-
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7258
|
-
VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal",
|
|
7246
|
+
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
7247
|
+
VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", ngImport: i0, template: "<div \n class=\"cqa-ui-root cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
7259
7248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, decorators: [{
|
|
7260
7249
|
type: Component,
|
|
7261
|
-
args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n
|
|
7262
|
-
}],
|
|
7263
|
-
|
|
7264
|
-
|
|
7265
|
-
|
|
7266
|
-
|
|
7267
|
-
|
|
7268
|
-
}], title: [{
|
|
7269
|
-
type: Input
|
|
7270
|
-
}], subtitle: [{
|
|
7271
|
-
type: Input
|
|
7272
|
-
}], isOpen: [{
|
|
7273
|
-
type: Input
|
|
7274
|
-
}], initialView: [{
|
|
7275
|
-
type: Input
|
|
7276
|
-
}], close: [{
|
|
7277
|
-
type: Output
|
|
7278
|
-
}] } });
|
|
7250
|
+
args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n class=\"cqa-ui-root cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
7251
|
+
}], ctorParameters: function () {
|
|
7252
|
+
return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
|
|
7253
|
+
type: Inject,
|
|
7254
|
+
args: [MAT_DIALOG_DATA]
|
|
7255
|
+
}] }];
|
|
7256
|
+
} });
|
|
7279
7257
|
|
|
7280
7258
|
class VisualComparisonComponent {
|
|
7281
|
-
constructor(cdr) {
|
|
7259
|
+
constructor(cdr, dialog) {
|
|
7282
7260
|
this.cdr = cdr;
|
|
7261
|
+
this.dialog = dialog;
|
|
7283
7262
|
this.showFullLogsLink = true;
|
|
7284
7263
|
this.isUploadingBaseline = {};
|
|
7285
7264
|
this.isMakingCurrentBaseline = {};
|
|
@@ -7288,8 +7267,6 @@ class VisualComparisonComponent {
|
|
|
7288
7267
|
this.uploadBaseline = new EventEmitter();
|
|
7289
7268
|
this.analyze = new EventEmitter();
|
|
7290
7269
|
this.viewFullLogs = new EventEmitter();
|
|
7291
|
-
this.isModalOpen = false;
|
|
7292
|
-
this.initialModalView = 'baseline';
|
|
7293
7270
|
}
|
|
7294
7271
|
ngAfterViewInit() {
|
|
7295
7272
|
this.updateBaselineUrl();
|
|
@@ -7387,19 +7364,33 @@ class VisualComparisonComponent {
|
|
|
7387
7364
|
}
|
|
7388
7365
|
}
|
|
7389
7366
|
onImageClick(type) {
|
|
7390
|
-
|
|
7391
|
-
|
|
7392
|
-
|
|
7393
|
-
|
|
7394
|
-
|
|
7367
|
+
var _a, _b, _c;
|
|
7368
|
+
const dialogData = {
|
|
7369
|
+
baselineUrl: ((_a = this.screenshots) === null || _a === void 0 ? void 0 : _a.baseline) || '',
|
|
7370
|
+
currentUrl: ((_b = this.screenshots) === null || _b === void 0 ? void 0 : _b.current) || '',
|
|
7371
|
+
differenceUrl: ((_c = this.screenshots) === null || _c === void 0 ? void 0 : _c.difference) || '',
|
|
7372
|
+
title: 'Visual Difference',
|
|
7373
|
+
subtitle: 'Comparing Baseline vs. Current Execution',
|
|
7374
|
+
initialView: type
|
|
7375
|
+
};
|
|
7376
|
+
this.dialog.open(VisualDifferenceModalComponent, {
|
|
7377
|
+
data: dialogData,
|
|
7378
|
+
maxWidth: '1200px !important',
|
|
7379
|
+
width: '90vw',
|
|
7380
|
+
height: '70vh',
|
|
7381
|
+
maxHeight: '90vh',
|
|
7382
|
+
panelClass: ['visual-difference-dialog', 'cqa-ui-root'],
|
|
7383
|
+
disableClose: false,
|
|
7384
|
+
autoFocus: false
|
|
7385
|
+
});
|
|
7395
7386
|
}
|
|
7396
7387
|
}
|
|
7397
|
-
VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7398
|
-
VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\n <!-- <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button> -->\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n No logs available\n </div>\n </div>\n\n <!-- <a \n *ngIf=\"showFullLogsLink && logs?.length\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a> -->\n </div>\n\n \n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"screenshots?.baseline || ''\"\n [currentUrl]=\"screenshots?.current || ''\"\n [differenceUrl]=\"screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"], components: [{ type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: ["baselineUrl", "currentUrl", "differenceUrl", "title", "subtitle", "isOpen", "initialView"], outputs: ["close"] }], 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"] }] });
|
|
7388
|
+
VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
7389
|
+
VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\n <!-- <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button> -->\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n No logs available\n </div>\n </div>\n\n <!-- <a \n *ngIf=\"showFullLogsLink && logs?.length\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a> -->\n </div>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7399
7390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
|
|
7400
7391
|
type: Component,
|
|
7401
|
-
args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\n <!-- <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button> -->\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n No logs available\n </div>\n </div>\n\n <!-- <a \n *ngIf=\"showFullLogsLink && logs?.length\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a> -->\n </div>\n\n \n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"screenshots?.baseline || ''\"\n [currentUrl]=\"screenshots?.current || ''\"\n [differenceUrl]=\"screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"] }]
|
|
7402
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { screenshots: [{
|
|
7392
|
+
args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\n <!-- <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button> -->\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n style=\"scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n No logs available\n </div>\n </div>\n\n <!-- <a \n *ngIf=\"showFullLogsLink && logs?.length\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a> -->\n </div>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"] }]
|
|
7393
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }]; }, propDecorators: { screenshots: [{
|
|
7403
7394
|
type: Input
|
|
7404
7395
|
}], logs: [{
|
|
7405
7396
|
type: Input
|
|
@@ -10352,7 +10343,7 @@ class FileDownloadStepComponent extends BaseStepComponent {
|
|
|
10352
10343
|
}
|
|
10353
10344
|
}
|
|
10354
10345
|
FileDownloadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
10355
|
-
FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded", stepDeleted: "stepDeleted", isDownloading: "isDownloading" }, outputs: { download: "download", filePathCopied: "filePathCopied", textCopied: "textCopied" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n [disabled]=\"isDownloading\"\n (click)=\"onDownload(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <mat-spinner *ngIf=\"isDownloading\" diameter=\"14\" style=\"display: inline-block;\"></mat-spinner>\n <svg *ngIf=\"!isDownloading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n {{ isDownloading ? 'Downloading...' : 'Download' }}\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <div class=\"cqa-relative\">\n <button class=\"cqa-px-1.5 cqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- Copied Tooltip -->\n <div\n *ngIf=\"showFilePathCopied\"\n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", components: [{ type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
10346
|
+
FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded", stepDeleted: "stepDeleted", isDownloading: "isDownloading" }, outputs: { download: "download", filePathCopied: "filePathCopied", textCopied: "textCopied" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n [disabled]=\"isDownloading\"\n (click)=\"onDownload(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <mat-spinner *ngIf=\"isDownloading\" diameter=\"14\" style=\"display: inline-block;\"></mat-spinner>\n <svg *ngIf=\"!isDownloading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n {{ isDownloading ? 'Downloading...' : 'Download' }}\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <div class=\"cqa-relative\">\n <button class=\"cqa-px-1.5 cqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- Copied Tooltip -->\n <div\n *ngIf=\"showFilePathCopied\"\n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", components: [{ type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
10356
10347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, decorators: [{
|
|
10357
10348
|
type: Component,
|
|
10358
10349
|
args: [{ selector: 'cqa-file-download-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n [disabled]=\"isDownloading\"\n (click)=\"onDownload(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <mat-spinner *ngIf=\"isDownloading\" diameter=\"14\" style=\"display: inline-block;\"></mat-spinner>\n <svg *ngIf=\"!isDownloading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n {{ isDownloading ? 'Downloading...' : 'Download' }}\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <div class=\"cqa-relative\">\n <button class=\"cqa-px-1.5 cqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- Copied Tooltip -->\n <div\n *ngIf=\"showFilePathCopied\"\n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", styles: [] }]
|
|
@@ -10555,7 +10546,7 @@ class LiveExecutionStepComponent extends BaseStepComponent {
|
|
|
10555
10546
|
}
|
|
10556
10547
|
}
|
|
10557
10548
|
LiveExecutionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
10558
|
-
LiveExecutionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveExecutionStepComponent, selector: "cqa-live-execution-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", expanded: "expanded", subSteps: "subSteps", stepDeleted: "stepDeleted" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running - Show spinner -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <!-- Skipped -->\n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\">\n <!-- Sub-steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n <div\n *ngFor=\"let subStep of subSteps; trackBy: trackBySubStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon or Loader -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n <!-- Loader when running -->\n <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n \n <!-- Success Icon when complete -->\n <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n <ngx-typed-js \n *ngIf=\"subStep.isRunning && subStep.text\"\n [strings]=\"[subStep.text]\"\n [typeSpeed]=\"30\"\n [showCursor]=\"false\"\n [fadeOut]=\"false\">\n <span class=\"typing\"></span>\n </ngx-typed-js>\n <span *ngIf=\"!subStep.isRunning\">{{ subStep.text }}</span>\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n {{ formatDuration(subStep.duration || 0) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1$
|
|
10549
|
+
LiveExecutionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveExecutionStepComponent, selector: "cqa-live-execution-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", expanded: "expanded", subSteps: "subSteps", stepDeleted: "stepDeleted" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running - Show spinner -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <!-- Skipped -->\n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\">\n <!-- Sub-steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n <div\n *ngFor=\"let subStep of subSteps; trackBy: trackBySubStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon or Loader -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n <!-- Loader when running -->\n <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n \n <!-- Success Icon when complete -->\n <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n <ngx-typed-js \n *ngIf=\"subStep.isRunning && subStep.text\"\n [strings]=\"[subStep.text]\"\n [typeSpeed]=\"30\"\n [showCursor]=\"false\"\n [fadeOut]=\"false\">\n <span class=\"typing\"></span>\n </ngx-typed-js>\n <span *ngIf=\"!subStep.isRunning\">{{ subStep.text }}</span>\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n {{ formatDuration(subStep.duration || 0) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1$6.NgxTypedJsComponent, selector: "ngx-typed-js", inputs: ["cursorColor", "strings", "stringsElement", "typeSpeed", "startDelay", "backSpeed", "smartBackspace", "shuffle", "backDelay", "fadeOut", "fadeOutClass", "fadeOutDelay", "loop", "loopCount", "showCursor", "cursorChar", "autoInsertCss", "attr", "bindInputFocusEvents", "contentType"], outputs: ["completed", "preStringTyped", "stringTyped", "lastStringBackspaced", "typingPaused", "typingResumed", "reset", "stopped", "started", "destroyed"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
10559
10550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, decorators: [{
|
|
10560
10551
|
type: Component,
|
|
10561
10552
|
args: [{ selector: 'cqa-live-execution-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <!-- Success -->\n <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Failed -->\n <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Pending -->\n <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <!-- Running - Show spinner -->\n <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n <!-- Skipped -->\n <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\">\n <!-- Sub-steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n <div\n *ngFor=\"let subStep of subSteps; trackBy: trackBySubStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon or Loader -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n <!-- Loader when running -->\n <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n \n <!-- Success Icon when complete -->\n <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <!-- Sub-step Description (text from socket) with typing animation -->\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n <ngx-typed-js \n *ngIf=\"subStep.isRunning && subStep.text\"\n [strings]=\"[subStep.text]\"\n [typeSpeed]=\"30\"\n [showCursor]=\"false\"\n [fadeOut]=\"false\">\n <span class=\"typing\"></span>\n </ngx-typed-js>\n <span *ngIf=\"!subStep.isRunning\">{{ subStep.text }}</span>\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n {{ formatDuration(subStep.duration || 0) }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -10693,6 +10684,8 @@ class SimulatorComponent {
|
|
|
10693
10684
|
this.liveLoadingLabel = 'Loading...';
|
|
10694
10685
|
this.isContentVideoLoading = false;
|
|
10695
10686
|
this.failedStatusMessage = '';
|
|
10687
|
+
this.isVNCSessionIntruppted = false;
|
|
10688
|
+
this.vncSessionIntupptedMessage = '';
|
|
10696
10689
|
this.selectedView = 'video';
|
|
10697
10690
|
this.hideVideoTab = false;
|
|
10698
10691
|
this.videoTimeUpdate = new EventEmitter();
|
|
@@ -11204,10 +11197,10 @@ class SimulatorComponent {
|
|
|
11204
11197
|
}
|
|
11205
11198
|
}
|
|
11206
11199
|
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 });
|
|
11207
|
-
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n matTooltip=\"Screen size: 1280x720\"\n matTooltipPosition=\"below\"\n >\n \u00B7 <span class=\"cqa-ml-1\">1280x720</span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n 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;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
11200
|
+
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n matTooltip=\"Screen size: 1280x720\"\n matTooltipPosition=\"below\"\n >\n \u00B7 <span class=\"cqa-ml-1\">1280x720</span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n <p class=\"cqa-text-sm cqa-text-gray-600\">\n {{ vncSessionIntupptedMessage }}\n </p>\n </ng-container>\n <ng-template #noVideoDefault>\n <span>No video recording found</span>\n </ng-template>\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
11208
11201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
|
|
11209
11202
|
type: Component,
|
|
11210
|
-
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n matTooltip=\"Screen size: 1280x720\"\n matTooltipPosition=\"below\"\n >\n \u00B7 <span class=\"cqa-ml-1\">1280x720</span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n 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;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", styles: [] }]
|
|
11203
|
+
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n {{ platformName }}\n <span\n *ngIf=\"platformType === 'browser'\"\n class=\"cqa-ml-1\"\n matTooltip=\"Screen size: 1280x720\"\n matTooltipPosition=\"below\"\n >\n \u00B7 <span class=\"cqa-ml-1\">1280x720</span>\n </span>\n </p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n </div>\n\n <ng-container *ngIf=\"!isLive\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <!-- Live Content View -->\n <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n <ng-container *ngIf=\"hasDeviceFrame;\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-[500px] cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-h-auto': isLive && platformType === 'browser' }\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n <!-- Loading State -->\n <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <div class=\"cqa-mb-4\">\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n </div>\n <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n </div>\n\n <!-- Live Content (when not loading) -->\n <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n </div>\n </div>\n <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Normal Video View (when not live) -->\n <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <video\n #vplayer\n class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n [src]=\"currentVideoUrl\"\n type=\"video/webm\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n (ended)=\"onVideoEnded()\"\n ></video>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n <p class=\"cqa-text-sm cqa-text-gray-600\">\n {{ vncSessionIntupptedMessage }}\n </p>\n </ng-container>\n <ng-template #noVideoDefault>\n <span>No video recording found</span>\n </ng-template>\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"currentVideoIndex === 0\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n (click)=\"prevVideo()\"\n matTooltip=\"Previous video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n </button>\n\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\"\n matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n matTooltipPosition=\"above\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <button \n *ngIf=\"hasMultipleVideos\"\n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n (click)=\"nextVideo()\"\n matTooltip=\"Next video\"\n matTooltipPosition=\"above\">\n <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n </button>\n\n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n [style.width.%]=\"progress\"\n [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 40;\"\n (mousedown)=\"startDrag($event)\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <ng-container *ngIf=\"hasDeviceFrame\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-[500px]\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser'}\">\n <img\n [src]=\"deviceMockupImage\"\n alt=\"Device mockup\"\n class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n />\n <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n />\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n\n <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n <iframe \n [src]=\"safeTraceUrl\" \n title=\"Trace Viewer\"\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n style=\"margin-top: -48px; height: calc(100% + 48px);\"\n frameborder=\"0\"\n allowfullscreen\n width=\"100%\"\n loading=\"lazy\"\n (load)=\"onTraceViewerLoad()\"\n (error)=\"onTraceViewerError()\">\n </iframe>\n </div>\n \n <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Loading trace viewer...\n </div>\n </div>\n \n <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n Failed to load trace viewer\n </div>\n </div>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n No trace available\n </div>\n </div> \n </div>\n</div>", styles: [] }]
|
|
11211
11204
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoUrl: [{
|
|
11212
11205
|
type: Input
|
|
11213
11206
|
}], videoUrls: [{
|
|
@@ -11238,6 +11231,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
11238
11231
|
type: Input
|
|
11239
11232
|
}], failedStatusMessage: [{
|
|
11240
11233
|
type: Input
|
|
11234
|
+
}], isVNCSessionIntruppted: [{
|
|
11235
|
+
type: Input
|
|
11236
|
+
}], vncSessionIntupptedMessage: [{
|
|
11237
|
+
type: Input
|
|
11241
11238
|
}], selectedView: [{
|
|
11242
11239
|
type: Input
|
|
11243
11240
|
}], hideVideoTab: [{
|
|
@@ -13762,6 +13759,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
13762
13759
|
MatNativeDateModule,
|
|
13763
13760
|
MatProgressSpinnerModule,
|
|
13764
13761
|
MatTooltipModule,
|
|
13762
|
+
MatDialogModule,
|
|
13765
13763
|
OverlayModule,
|
|
13766
13764
|
PortalModule,
|
|
13767
13765
|
NgxTypedJsModule], exports: [ButtonComponent,
|
|
@@ -13869,6 +13867,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
|
|
|
13869
13867
|
MatNativeDateModule,
|
|
13870
13868
|
MatProgressSpinnerModule,
|
|
13871
13869
|
MatTooltipModule,
|
|
13870
|
+
MatDialogModule,
|
|
13872
13871
|
OverlayModule,
|
|
13873
13872
|
PortalModule,
|
|
13874
13873
|
NgxTypedJsModule
|
|
@@ -13965,6 +13964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
13965
13964
|
MatNativeDateModule,
|
|
13966
13965
|
MatProgressSpinnerModule,
|
|
13967
13966
|
MatTooltipModule,
|
|
13967
|
+
MatDialogModule,
|
|
13968
13968
|
OverlayModule,
|
|
13969
13969
|
PortalModule,
|
|
13970
13970
|
NgxTypedJsModule
|
|
@@ -14187,14 +14187,14 @@ class DialogService {
|
|
|
14187
14187
|
});
|
|
14188
14188
|
}
|
|
14189
14189
|
}
|
|
14190
|
-
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$
|
|
14190
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$7.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
14191
14191
|
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, providedIn: 'root' });
|
|
14192
14192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, decorators: [{
|
|
14193
14193
|
type: Injectable,
|
|
14194
14194
|
args: [{
|
|
14195
14195
|
providedIn: 'root',
|
|
14196
14196
|
}]
|
|
14197
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
14197
|
+
}], ctorParameters: function () { return [{ type: i1$7.Overlay }, { type: i0.Injector }]; } });
|
|
14198
14198
|
|
|
14199
14199
|
/**
|
|
14200
14200
|
* Generated bundle index. Do not edit.
|