@cqa-lib/cqa-ui 1.1.87 → 1.1.89

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -9120,6 +9120,7 @@ class SimulatorComponent {
         this.isContentVideoLoading = false;
         this.failedStatusMessage = '';
         this.selectedView = 'video';
+        this.hideVideoTab = false;
         this.videoTimeUpdate = new EventEmitter();
         this.videoPlay = new EventEmitter();
         this.videoPause = new EventEmitter();
@@ -9157,9 +9158,12 @@ class SimulatorComponent {
             this.updateSafeTraceUrl();
             this.updateSegments();
             if (!this.traceViewUrl && this.currentView === 'trace') {
-                this.currentView = 'video';
+                this.currentView = this.hideVideoTab ? 'screenshots' : 'video';
             }
         }
+        if (changes['hideVideoTab']) {
+            this.updateSegments();
+        }
         if (changes['selectedView']) {
             this.currentView = changes['selectedView'].currentValue;
         }
@@ -9388,16 +9392,23 @@ class SimulatorComponent {
     updateSegments() {
         const baseSegments = [
             { label: 'Screenshots', value: 'screenshots', icon: 'photo' },
-            { label: 'Video', value: 'video', icon: 'videocam' },
         ];
+        // Only add Video tab if hideVideoTab is false
+        if (!this.hideVideoTab) {
+            baseSegments.push({ label: 'Video', value: 'video', icon: 'videocam' });
+        }
         if (this.traceViewUrl) {
             baseSegments.push({ label: 'Trace', value: 'trace', icon: 'graphic_eq' });
         }
         this.segments = baseSegments;
+        // If current view is 'video' and video tab is hidden, switch to screenshots
+        if (this.currentView === 'video' && this.hideVideoTab) {
+            this.currentView = 'screenshots';
+        }
     }
 }
 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 });
-SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", selectedView: "selectedView" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayer", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <!-- Loading State -->\n      <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n        <div class=\"cqa-mb-4\">\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n        </div>\n        <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n      </div>\n\n      <!-- Live Content (when not loading) -->\n      <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n        <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n          <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n            <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n            <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n          </div>\n        </div>\n        <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n        <video\n          #vplayer\n          class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n          [src]=\"videoUrl\"\n          type=\"video/webm\"\n          (loadedmetadata)=\"onVideoMetadataLoaded()\"\n          (canplay)=\"onVideoCanPlay()\"\n          (ended)=\"onVideoEnded()\"\n        ></video>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!videoUrl\">\n        No video recording found\n      </div>\n    \n       <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl && !isLive\">\n       <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n         <button \n           type=\"button\"\n           class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n           style=\"pointer-events: auto;\"\n           (click)=\"togglePlay()\">\n          <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n            </svg>\n          </span>\n          <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n             <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n               <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n               <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n             </svg>\n           </span>\n         </button>\n   \n         <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n           {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n         </span>\n   \n         <div \n           #timelineBar\n           class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n           (click)=\"onTimelineClick($event)\">\n           \n           <div \n             *ngFor=\"let step of stepMarkers\" \n             class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n             [style.left.%]=\"getStepLeftPosition(step)\"\n             [style.background]=\"getStepColor(step)\"\n             style=\"pointer-events: none; z-index: 20;\">\n           </div>\n           \n           <div \n             class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full\"\n             [style.width.%]=\"progress\"\n             [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n             style=\"pointer-events: none; z-index: 2;\">\n           </div>\n           \n           <div \n             class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n             [style.left.%]=\"progress\"\n             style=\"transform: translate(-50%, -50%); z-index: 10;\"\n             (mousedown)=\"startDrag($event)\">\n           </div>\n         </div>\n       </div>\n     </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <img\n          [src]=\"screenShotUrl\"\n          alt=\"Screenshot\"\n          class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n        />\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-py-4 cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n        <iframe \n          [src]=\"safeTraceUrl\" \n          title=\"Trace Viewer\"\n          class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n          frameborder=\"0\"\n          allowfullscreen\n          width=\"100%\"\n          height=\"100%\"\n          loading=\"lazy\"\n          (load)=\"onTraceViewerLoad()\"\n          (error)=\"onTraceViewerError()\">\n        </iframe>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayer", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <!-- Loading State -->\n      <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n        <div class=\"cqa-mb-4\">\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n        </div>\n        <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n      </div>\n\n      <!-- Live Content (when not loading) -->\n      <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n        <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n          <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n            <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n            <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n          </div>\n        </div>\n        <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n        <video\n          #vplayer\n          class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n          [src]=\"videoUrl\"\n          type=\"video/webm\"\n          (loadedmetadata)=\"onVideoMetadataLoaded()\"\n          (canplay)=\"onVideoCanPlay()\"\n          (ended)=\"onVideoEnded()\"\n        ></video>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!videoUrl\">\n        No video recording found\n      </div>\n    \n       <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl && !isLive\">\n       <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n         <button \n           type=\"button\"\n           class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n           style=\"pointer-events: auto;\"\n           (click)=\"togglePlay()\">\n          <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n            </svg>\n          </span>\n          <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n             <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n               <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n               <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n             </svg>\n           </span>\n         </button>\n   \n         <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n           {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n         </span>\n   \n         <div \n           #timelineBar\n           class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n           (click)=\"onTimelineClick($event)\">\n           \n           <div \n             *ngFor=\"let step of stepMarkers\" \n             class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n             [style.left.%]=\"getStepLeftPosition(step)\"\n             [style.background]=\"getStepColor(step)\"\n             style=\"pointer-events: none; z-index: 20;\">\n           </div>\n           \n           <div \n             class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full\"\n             [style.width.%]=\"progress\"\n             [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n             style=\"pointer-events: none; z-index: 2;\">\n           </div>\n           \n           <div \n             class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n             [style.left.%]=\"progress\"\n             style=\"transform: translate(-50%, -50%); z-index: 10;\"\n             (mousedown)=\"startDrag($event)\">\n           </div>\n         </div>\n       </div>\n     </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <img\n          [src]=\"screenShotUrl\"\n          alt=\"Screenshot\"\n          class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n        />\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-py-4 cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n        <iframe \n          [src]=\"safeTraceUrl\" \n          title=\"Trace Viewer\"\n          class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n          frameborder=\"0\"\n          allowfullscreen\n          width=\"100%\"\n          height=\"100%\"\n          loading=\"lazy\"\n          (load)=\"onTraceViewerLoad()\"\n          (error)=\"onTraceViewerError()\">\n        </iframe>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <!-- Loading State -->\n      <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n        <div class=\"cqa-mb-4\">\n          <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n        </div>\n        <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n      </div>\n\n      <!-- Live Content (when not loading) -->\n      <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n        <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n          <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n            <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n            <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n          </div>\n        </div>\n        <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n        <video\n          #vplayer\n          class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n          [src]=\"videoUrl\"\n          type=\"video/webm\"\n          (loadedmetadata)=\"onVideoMetadataLoaded()\"\n          (canplay)=\"onVideoCanPlay()\"\n          (ended)=\"onVideoEnded()\"\n        ></video>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!videoUrl\">\n        No video recording found\n      </div>\n    \n       <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl && !isLive\">\n       <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n         <button \n           type=\"button\"\n           class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n           style=\"pointer-events: auto;\"\n           (click)=\"togglePlay()\">\n          <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n            </svg>\n          </span>\n          <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n             <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n               <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n               <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n             </svg>\n           </span>\n         </button>\n   \n         <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n           {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n         </span>\n   \n         <div \n           #timelineBar\n           class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n           (click)=\"onTimelineClick($event)\">\n           \n           <div \n             *ngFor=\"let step of stepMarkers\" \n             class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n             [style.left.%]=\"getStepLeftPosition(step)\"\n             [style.background]=\"getStepColor(step)\"\n             style=\"pointer-events: none; z-index: 20;\">\n           </div>\n           \n           <div \n             class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full\"\n             [style.width.%]=\"progress\"\n             [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n             style=\"pointer-events: none; z-index: 2;\">\n           </div>\n           \n           <div \n             class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n             [style.left.%]=\"progress\"\n             style=\"transform: translate(-50%, -50%); z-index: 10;\"\n             (mousedown)=\"startDrag($event)\">\n           </div>\n         </div>\n       </div>\n     </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <img\n          [src]=\"screenShotUrl\"\n          alt=\"Screenshot\"\n          class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n        />\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-py-4 cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n        <iframe \n          [src]=\"safeTraceUrl\" \n          title=\"Trace Viewer\"\n          class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n          frameborder=\"0\"\n          allowfullscreen\n          width=\"100%\"\n          height=\"100%\"\n          loading=\"lazy\"\n          (load)=\"onTraceViewerLoad()\"\n          (error)=\"onTraceViewerError()\">\n        </iframe>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
@@ -9427,6 +9438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], selectedView: [{
                 type: Input
+            }], hideVideoTab: [{
+                type: Input
             }], videoTimeUpdate: [{
                 type: Output
             }], videoPlay: [{
@@ -10855,10 +10868,10 @@ class ExecutionResultModalComponent {
     }
 }
 ExecutionResultModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal" }, ngImport: i0, template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n        </div>\n      </div>\n  \n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px]\" style=\"border: 1px solid #E5E7EB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let i = index\">\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal" }, ngImport: i0, template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n        </div>\n      </div>\n  \n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px]\" style=\"border: 1px solid #E5E7EB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let i = index\">\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-execution-result-modal', template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n        </div>\n      </div>\n  \n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px]\" style=\"border: 1px solid #E5E7EB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let i = index\">\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-execution-result-modal', template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n        </div>\n      </div>\n  \n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px]\" style=\"border: 1px solid #E5E7EB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let i = index\">\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", styles: [] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], status: [{