@cqa-lib/cqa-ui 1.1.43 → 1.1.44

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

@@ -21,6 +21,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i4$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -7108,14 +7109,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class SimulatorComponent {
-    constructor() {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
         this.videoUrl = '';
         this.videoCurrentDuration = 0;
         this.stepMarkers = [];
         this.screenShotUrl = '';
+        this.traceViewUrl = '';
         this.platformName = 'Web - Chrome';
         this.platformType = 'browser';
         this.isLive = false;
+        this.liveStatus = 'In Progress';
+        this.liveLoadingLabel = 'Loading...';
+        this.isContentVideoLoading = false;
         this.videoTimeUpdate = new EventEmitter();
         this.videoPlay = new EventEmitter();
         this.videoPause = new EventEmitter();
@@ -7130,9 +7136,16 @@ class SimulatorComponent {
         ];
         this.videoEventListenerCleanup = null;
         this.lastSetDuration = -1;
+        this.dragMouseMoveHandler = null;
+        this.dragMouseUpHandler = null;
+        this.traceViewerLoading = false;
+        this.traceViewerError = false;
+        this.safeTraceUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');
+        this.updateSegments();
     }
     ngAfterViewInit() {
         this.attachVideoListeners();
+        this.updateSafeTraceUrl();
     }
     ngOnChanges(changes) {
         if (changes['videoCurrentDuration'] && !changes['videoCurrentDuration'].firstChange) {
@@ -7141,11 +7154,19 @@ class SimulatorComponent {
                 this.seekToTime(newDuration);
             }
         }
+        if (changes['traceViewUrl']) {
+            this.updateSafeTraceUrl();
+            this.updateSegments();
+            if (!this.traceViewUrl && this.currentView === 'trace') {
+                this.currentView = 'video';
+            }
+        }
     }
     ngOnDestroy() {
         if (this.videoEventListenerCleanup) {
             this.videoEventListenerCleanup();
         }
+        this.removeDragListeners();
     }
     seekToTime(milliseconds) {
         if (!this.vplayer?.nativeElement || !this.vplayer.nativeElement.duration)
@@ -7183,8 +7204,10 @@ class SimulatorComponent {
         this.vplayer.nativeElement.currentTime = targetTimeSeconds;
         this.lastSetDuration = targetTimeSeconds * 1000;
     }
-    startDrag() {
+    startDrag(event) {
+        event.preventDefault();
         this.dragging = true;
+        this.addDragListeners();
     }
     onDrag(event) {
         if (!this.dragging || !this.timelineBar?.nativeElement)
@@ -7195,12 +7218,36 @@ class SimulatorComponent {
         this.progress = percent * 100;
     }
     stopDrag() {
-        if (!this.dragging || !this.vplayer?.nativeElement)
+        if (!this.dragging)
             return;
         this.dragging = false;
-        const targetTimeSeconds = (this.progress / 100) * this.vplayer.nativeElement.duration;
-        this.vplayer.nativeElement.currentTime = targetTimeSeconds;
-        this.lastSetDuration = targetTimeSeconds * 1000;
+        this.removeDragListeners();
+        if (this.vplayer?.nativeElement) {
+            const targetTimeSeconds = (this.progress / 100) * this.vplayer.nativeElement.duration;
+            this.vplayer.nativeElement.currentTime = targetTimeSeconds;
+            this.lastSetDuration = targetTimeSeconds * 1000;
+        }
+    }
+    addDragListeners() {
+        this.removeDragListeners();
+        this.dragMouseMoveHandler = (e) => {
+            this.onDrag(e);
+        };
+        this.dragMouseUpHandler = () => {
+            this.stopDrag();
+        };
+        document.addEventListener('mousemove', this.dragMouseMoveHandler);
+        document.addEventListener('mouseup', this.dragMouseUpHandler);
+    }
+    removeDragListeners() {
+        if (this.dragMouseMoveHandler) {
+            document.removeEventListener('mousemove', this.dragMouseMoveHandler);
+            this.dragMouseMoveHandler = null;
+        }
+        if (this.dragMouseUpHandler) {
+            document.removeEventListener('mouseup', this.dragMouseUpHandler);
+            this.dragMouseUpHandler = null;
+        }
     }
     onVideoMetadataLoaded() {
         this.attachVideoListeners();
@@ -7208,6 +7255,10 @@ class SimulatorComponent {
     onVideoCanPlay() {
         this.attachVideoListeners();
     }
+    onVideoEnded() {
+        this.isPlaying = false;
+        this.videoPause.emit();
+    }
     attachVideoListeners() {
         if (this.videoEventListenerCleanup) {
             this.videoEventListenerCleanup();
@@ -7260,13 +7311,95 @@ class SimulatorComponent {
         const secs = Math.floor(seconds % 60);
         return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     }
+    getStatusBadgeClass() {
+        const baseClasses = 'cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-[9px] cqa-py-[3px] cqa-rounded-[6px] cqa-h-[21px]';
+        switch (this.liveStatus) {
+            case 'In Progress':
+            case 'Execution':
+                return `${baseClasses} cqa-bg-[#E0F2FE] cqa-border cqa-border-[#7DD3FC]`;
+            case 'Paused':
+                return `${baseClasses} cqa-bg-[#FEF3C7] cqa-border cqa-border-[#FCD34D]`;
+            case 'Aborted':
+                return `${baseClasses} cqa-bg-[#FEE2E2] cqa-border cqa-border-[#FCA5A5]`;
+            case 'Failed':
+                return `${baseClasses} cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF]`;
+            case 'Passed':
+                return `${baseClasses} cqa-bg-[#D1FAE5] cqa-border cqa-border-[#6EE7B7]`;
+            default:
+                return `${baseClasses} cqa-bg-gray-200 cqa-border cqa-border-gray-300`;
+        }
+    }
+    getStatusTextClass() {
+        switch (this.liveStatus) {
+            case 'In Progress':
+            case 'Execution':
+                return 'cqa-text-[10px] cqa-font-medium cqa-text-[#0284C7] cqa-leading-[15px]';
+            case 'Paused':
+                return 'cqa-text-[10px] cqa-font-medium cqa-text-[#D97706] cqa-leading-[15px]';
+            case 'Aborted':
+                return 'cqa-text-[10px] cqa-font-medium cqa-text-[#DC2626] cqa-leading-[15px]';
+            case 'Failed':
+                return 'cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]';
+            case 'Passed':
+                return 'cqa-text-[10px] cqa-font-medium cqa-text-[#059669] cqa-leading-[15px]';
+            default:
+                return 'cqa-text-[10px] cqa-font-medium cqa-text-gray-600 cqa-leading-[15px]';
+        }
+    }
+    get processedTraceUrl() {
+        if (!this.traceViewUrl)
+            return '';
+        if (this.traceViewUrl.endsWith('.zip')) {
+            const urlParams = new URLSearchParams({
+                trace: this.traceViewUrl,
+                hideHeader: 'true',
+                hideBranding: 'true',
+                embed: 'true',
+                minimal: 'true',
+                noHeader: 'true'
+            });
+            return `https://trace.playwright.dev/?${urlParams.toString()}`;
+        }
+        return this.traceViewUrl;
+    }
+    updateSafeTraceUrl() {
+        const url = this.processedTraceUrl;
+        if (url) {
+            this.traceViewerLoading = true;
+            this.traceViewerError = false;
+            this.safeTraceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+        }
+        else {
+            this.traceViewerLoading = false;
+            this.traceViewerError = false;
+            this.safeTraceUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');
+        }
+    }
+    onTraceViewerLoad() {
+        this.traceViewerLoading = false;
+        this.traceViewerError = false;
+    }
+    onTraceViewerError() {
+        this.traceViewerLoading = false;
+        this.traceViewerError = true;
+    }
+    updateSegments() {
+        const baseSegments = [
+            { label: 'Screenshots', value: 'screenshots', icon: 'photo' },
+            { label: 'Video', value: 'video', icon: 'videocam' },
+        ];
+        if (this.traceViewUrl) {
+            baseSegments.push({ label: 'Trace', value: 'trace', icon: 'graphic_eq' });
+        }
+        this.segments = baseSegments;
+    }
 }
-SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [], 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", platformName: "platformName", platformType: "platformType", isLive: "isLive" }, 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        <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      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <div *ngIf=\"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        ></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\">\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           (mousemove)=\"onDrag($event)\"\n           (mouseup)=\"stopDrag()\" \n           (mouseleave)=\"stopDrag()\">\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 cqa-transition-[width] cqa-duration-100\"\n             [style.width.%]=\"progress\"\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()\">\n           </div>\n         </div>\n       </div>\n     </div>\n    </div>\n\n    <div *ngIf=\"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  </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"] }], 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$2.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" }, 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-items-center cqa-justify-center\">\n        <ng-content></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-max-h-[calc(100%-35px)] 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        <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      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <div *ngIf=\"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        ></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\">\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           (mousemove)=\"onDrag($event)\"\n           (mouseup)=\"stopDrag()\" \n           (mouseleave)=\"stopDrag()\">\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 cqa-transition-[width] cqa-duration-100\"\n             [style.width.%]=\"progress\"\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()\">\n           </div>\n         </div>\n       </div>\n     </div>\n    </div>\n\n    <div *ngIf=\"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  </div>\n</div>", styles: [] }]
-        }], propDecorators: { videoUrl: [{
+            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-items-center cqa-justify-center\">\n        <ng-content></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-max-h-[calc(100%-35px)] 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: [] }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { videoUrl: [{
                 type: Input
             }], videoCurrentDuration: [{
                 type: Input
@@ -7274,12 +7407,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], screenShotUrl: [{
                 type: Input
+            }], traceViewUrl: [{
+                type: Input
             }], platformName: [{
                 type: Input
             }], platformType: [{
                 type: Input
             }], isLive: [{
                 type: Input
+            }], liveStatus: [{
+                type: Input
+            }], liveLoadingLabel: [{
+                type: Input
+            }], isContentVideoLoading: [{
+                type: Input
             }], videoTimeUpdate: [{
                 type: Output
             }], videoPlay: [{
@@ -8756,10 +8897,10 @@ class ProgressIndicatorComponent {
     }
 }
 ProgressIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressIndicatorComponent, selector: "cqa-progress-indicator", inputs: { variant: "variant", label: "label", icon: "icon", value: "value", progress: "progress", size: "size", strokeWidth: "strokeWidth" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-p-[21px] cqa-transition-colors cqa-w-1/2 cqa-rounded-xl cqa-bg-surface-default\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Progress Spinner SVG -->\n    <div class=\"cqa-flex-shrink-0\" *ngIf=\"variant === 'progress' && !icon\">\n      <svg \n        [attr.width]=\"size\" \n        [attr.height]=\"size\" \n        class=\"cqa-transform cqa--rotate-90\"\n        style=\"overflow: visible;\">\n        <!-- Background circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          stroke=\"#D8D9FC\"\n          [attr.stroke-width]=\"strokeWidth\"\n        />\n        <!-- Progress circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          [attr.stroke]=\"color\"\n          [attr.stroke-width]=\"strokeWidth\"\n          [attr.stroke-dasharray]=\"circleStyles.strokeDasharray\"\n          [attr.stroke-dashoffset]=\"circleStyles.strokeDashoffset\"\n          stroke-linecap=\"round\"\n          class=\"cqa-transition-all cqa-duration-300 cqa-ease-in-out\"\n        />\n      </svg>\n    </div>\n    <div class=\"cqa-flex-shrink-0\" *ngIf=\"icon\">\n      <mat-icon class=\"cqa-text-primary\">{{ icon }}</mat-icon>\n    </div>\n    \n    <!-- Text Content -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n      <span class=\"cqa-text-sm cqa-font-normal cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary-hover\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"variant === 'progress'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ progress }}%\n      </span>\n      <span *ngIf=\"variant === 'elapsed-time'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ value }}\n      </span>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ProgressIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressIndicatorComponent, selector: "cqa-progress-indicator", inputs: { variant: "variant", label: "label", icon: "icon", value: "value", progress: "progress", size: "size", strokeWidth: "strokeWidth" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-p-[21px] cqa-transition-colors cqa-rounded-xl cqa-bg-surface-default\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Progress Spinner SVG -->\n    <div class=\"cqa-flex-shrink-0\" *ngIf=\"variant === 'progress' && !icon\">\n      <svg \n        [attr.width]=\"size\" \n        [attr.height]=\"size\" \n        class=\"cqa-transform cqa--rotate-90\"\n        style=\"overflow: visible;\">\n        <!-- Background circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          stroke=\"#D8D9FC\"\n          [attr.stroke-width]=\"strokeWidth\"\n        />\n        <!-- Progress circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          [attr.stroke]=\"color\"\n          [attr.stroke-width]=\"strokeWidth\"\n          [attr.stroke-dasharray]=\"circleStyles.strokeDasharray\"\n          [attr.stroke-dashoffset]=\"circleStyles.strokeDashoffset\"\n          stroke-linecap=\"round\"\n          class=\"cqa-transition-all cqa-duration-300 cqa-ease-in-out\"\n        />\n      </svg>\n    </div>\n    <mat-icon *ngIf=\"icon\" class=\"cqa-text-primary !cqa-text-[32px] cqa-w-[32px] cqa-h-[32px]\">{{ icon }}</mat-icon>\n    \n    <!-- Text Content -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n      <span class=\"cqa-text-sm cqa-font-normal cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary-hover\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"variant === 'progress'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ progress }}%\n      </span>\n      <span *ngIf=\"variant === 'elapsed-time'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ value }}\n      </span>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-progress-indicator', template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-p-[21px] cqa-transition-colors cqa-w-1/2 cqa-rounded-xl cqa-bg-surface-default\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Progress Spinner SVG -->\n    <div class=\"cqa-flex-shrink-0\" *ngIf=\"variant === 'progress' && !icon\">\n      <svg \n        [attr.width]=\"size\" \n        [attr.height]=\"size\" \n        class=\"cqa-transform cqa--rotate-90\"\n        style=\"overflow: visible;\">\n        <!-- Background circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          stroke=\"#D8D9FC\"\n          [attr.stroke-width]=\"strokeWidth\"\n        />\n        <!-- Progress circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          [attr.stroke]=\"color\"\n          [attr.stroke-width]=\"strokeWidth\"\n          [attr.stroke-dasharray]=\"circleStyles.strokeDasharray\"\n          [attr.stroke-dashoffset]=\"circleStyles.strokeDashoffset\"\n          stroke-linecap=\"round\"\n          class=\"cqa-transition-all cqa-duration-300 cqa-ease-in-out\"\n        />\n      </svg>\n    </div>\n    <div class=\"cqa-flex-shrink-0\" *ngIf=\"icon\">\n      <mat-icon class=\"cqa-text-primary\">{{ icon }}</mat-icon>\n    </div>\n    \n    <!-- Text Content -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n      <span class=\"cqa-text-sm cqa-font-normal cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary-hover\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"variant === 'progress'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ progress }}%\n      </span>\n      <span *ngIf=\"variant === 'elapsed-time'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ value }}\n      </span>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-progress-indicator', template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-p-[21px] cqa-transition-colors cqa-rounded-xl cqa-bg-surface-default\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Progress Spinner SVG -->\n    <div class=\"cqa-flex-shrink-0\" *ngIf=\"variant === 'progress' && !icon\">\n      <svg \n        [attr.width]=\"size\" \n        [attr.height]=\"size\" \n        class=\"cqa-transform cqa--rotate-90\"\n        style=\"overflow: visible;\">\n        <!-- Background circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          stroke=\"#D8D9FC\"\n          [attr.stroke-width]=\"strokeWidth\"\n        />\n        <!-- Progress circle -->\n        <circle\n          [attr.cx]=\"circleStyles.cx\"\n          [attr.cy]=\"circleStyles.cy\"\n          [attr.r]=\"circleStyles.r\"\n          fill=\"none\"\n          [attr.stroke]=\"color\"\n          [attr.stroke-width]=\"strokeWidth\"\n          [attr.stroke-dasharray]=\"circleStyles.strokeDasharray\"\n          [attr.stroke-dashoffset]=\"circleStyles.strokeDashoffset\"\n          stroke-linecap=\"round\"\n          class=\"cqa-transition-all cqa-duration-300 cqa-ease-in-out\"\n        />\n      </svg>\n    </div>\n    <mat-icon *ngIf=\"icon\" class=\"cqa-text-primary !cqa-text-[32px] cqa-w-[32px] cqa-h-[32px]\">{{ icon }}</mat-icon>\n    \n    <!-- Text Content -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n      <span class=\"cqa-text-sm cqa-font-normal cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary-hover\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"variant === 'progress'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ progress }}%\n      </span>\n      <span *ngIf=\"variant === 'elapsed-time'\" class=\"cqa-text-2xl cqa-font-bold cqa-leading-tight cqa-tracking-[-0.2px] cqa-text-primary\">\n        {{ value }}\n      </span>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], label: [{
@@ -8780,7 +8921,6 @@ class StepProgressCardComponent {
     constructor() {
         this.currentStep = 4;
         this.totalSteps = 6;
-        this.subText = 'This may take up to 30s. Preparing environment and dependencies...';
     }
     get progressPercentage() {
         return (this.currentStep / this.totalSteps) * 100;
@@ -8790,10 +8930,10 @@ class StepProgressCardComponent {
     }
 }
 StepProgressCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepProgressCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepProgressCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepProgressCardComponent, selector: "cqa-step-progress-card", inputs: { currentStep: "currentStep", totalSteps: "totalSteps", subText: "subText" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-px-[25px] cqa-py-3 cqa-rounded-[14px] cqa-bg-surface-default cqa-flex cqa-flex-col cqa-gap-2 cqa-relative cqa-shadow\"\n    [ngStyle]=\"{ border: '1px solid #E5E7EB' }\">\n    <!-- Card Header with Title and Step Info -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n      <span class=\"cqa-font-normal cqa-text-base cqa-leading-6 cqa-text-[#364153]\">Setup Progress</span>\n      <span class=\"cqa-font-normal cqa-text-sm cqa-leading-[18px] cqa-text-metadata-key\">{{ stepText }}</span>\n    </div>\n\n    <!-- Progress Bar -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-full cqa-h-[10px] cqa-rounded-full cqa-bg-primary-surface cqa-overflow-hidden cqa-relative\">\n        <div \n          class=\"cqa-h-full cqa-bg-primary cqa-rounded-full cqa-transition-all cqa-duration-300 cqa-ease-in-out\" \n          [style.width.%]=\"progressPercentage\">\n        </div>\n      </div>\n    </div>\n\n    <!-- Sub Text -->\n    <div class=\"cqa-font-normal cqa-text-xs cqa-text-metadata-key cqa-mt-2 cqa-truncate cqa-whitespace-nowrap cqa-leading-tight\">\n        {{ subText }}\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+StepProgressCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepProgressCardComponent, selector: "cqa-step-progress-card", inputs: { currentStep: "currentStep", totalSteps: "totalSteps", subText: "subText" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-px-[25px] cqa-py-3 cqa-rounded-[14px] cqa-bg-surface-default cqa-flex cqa-flex-col cqa-relative cqa-shadow\"\n    [ngStyle]=\"{ border: '1px solid #E5E7EB' }\">\n    <!-- Card Header with Title and Step Info -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <span class=\"cqa-font-normal cqa-text-base cqa-leading-6 cqa-text-[#364153]\">Setup Progress</span>\n      <span class=\"cqa-font-normal cqa-text-sm cqa-leading-[18px] cqa-text-metadata-key\">{{ stepText }}</span>\n    </div>\n\n    <!-- Progress Bar -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n      <div class=\"cqa-w-full cqa-h-[10px] cqa-rounded-full cqa-bg-primary-surface cqa-overflow-hidden cqa-relative\">\n        <div \n          class=\"cqa-h-full cqa-bg-primary cqa-rounded-full cqa-transition-all cqa-duration-300 cqa-ease-in-out\" \n          [style.width.%]=\"progressPercentage\">\n        </div>\n      </div>\n    </div>\n\n    <!-- Sub Text -->\n    <div *ngIf=\"subText\" class=\"cqa-font-normal cqa-text-xs cqa-text-metadata-key cqa-mt-1 cqa-truncate cqa-whitespace-nowrap cqa-leading-tight\">\n        {{ subText }}\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepProgressCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-progress-card', template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-px-[25px] cqa-py-3 cqa-rounded-[14px] cqa-bg-surface-default cqa-flex cqa-flex-col cqa-gap-2 cqa-relative cqa-shadow\"\n    [ngStyle]=\"{ border: '1px solid #E5E7EB' }\">\n    <!-- Card Header with Title and Step Info -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2\">\n      <span class=\"cqa-font-normal cqa-text-base cqa-leading-6 cqa-text-[#364153]\">Setup Progress</span>\n      <span class=\"cqa-font-normal cqa-text-sm cqa-leading-[18px] cqa-text-metadata-key\">{{ stepText }}</span>\n    </div>\n\n    <!-- Progress Bar -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-full cqa-h-[10px] cqa-rounded-full cqa-bg-primary-surface cqa-overflow-hidden cqa-relative\">\n        <div \n          class=\"cqa-h-full cqa-bg-primary cqa-rounded-full cqa-transition-all cqa-duration-300 cqa-ease-in-out\" \n          [style.width.%]=\"progressPercentage\">\n        </div>\n      </div>\n    </div>\n\n    <!-- Sub Text -->\n    <div class=\"cqa-font-normal cqa-text-xs cqa-text-metadata-key cqa-mt-2 cqa-truncate cqa-whitespace-nowrap cqa-leading-tight\">\n        {{ subText }}\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-step-progress-card', template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-px-[25px] cqa-py-3 cqa-rounded-[14px] cqa-bg-surface-default cqa-flex cqa-flex-col cqa-relative cqa-shadow\"\n    [ngStyle]=\"{ border: '1px solid #E5E7EB' }\">\n    <!-- Card Header with Title and Step Info -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <span class=\"cqa-font-normal cqa-text-base cqa-leading-6 cqa-text-[#364153]\">Setup Progress</span>\n      <span class=\"cqa-font-normal cqa-text-sm cqa-leading-[18px] cqa-text-metadata-key\">{{ stepText }}</span>\n    </div>\n\n    <!-- Progress Bar -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n      <div class=\"cqa-w-full cqa-h-[10px] cqa-rounded-full cqa-bg-primary-surface cqa-overflow-hidden cqa-relative\">\n        <div \n          class=\"cqa-h-full cqa-bg-primary cqa-rounded-full cqa-transition-all cqa-duration-300 cqa-ease-in-out\" \n          [style.width.%]=\"progressPercentage\">\n        </div>\n      </div>\n    </div>\n\n    <!-- Sub Text -->\n    <div *ngIf=\"subText\" class=\"cqa-font-normal cqa-text-xs cqa-text-metadata-key cqa-mt-1 cqa-truncate cqa-whitespace-nowrap cqa-leading-tight\">\n        {{ subText }}\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { currentStep: [{
                 type: Input
             }], totalSteps: [{
@@ -8807,6 +8947,7 @@ class StepStatusCardComponent {
         this.title = '';
         this.description = '';
         this.type = 'waiting';
+        this.icon = '';
     }
     get statusConfig() {
         const configs = {
@@ -8825,7 +8966,7 @@ class StepStatusCardComponent {
                 iconColor: '#1B1FEB',
                 statusColor: '#1216CC',
                 statusBgColor: '#D8D9FC',
-                icon: 'autorenew',
+                icon: '',
                 label: 'Running'
             },
             waiting: {
@@ -8842,16 +8983,16 @@ class StepStatusCardComponent {
     }
     get cardStyles() {
         return {
-            'border': '1px solid ' + this.statusConfig.borderColor,
-            'background-color': this.statusConfig.bgColor
+            'border': '1px solid ' + (this.statusConfig?.borderColor || '#E5E7EB'),
+            'background-color': (this.statusConfig?.bgColor || '#FFFFFF')
         };
     }
 }
 StepStatusCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepStatusCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepStatusCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepStatusCardComponent, selector: "cqa-step-status-card", inputs: { title: "title", description: "description", type: "type", icon: "icon" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-p-4 cqa-rounded-[14px] cqa-shadow cqa-flex cqa-items-center cqa-justify-between cqa-transition-all\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Left Section: Icon and Text -->\n    <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-flex-1\">\n      <!-- Icon -->\n      <div class=\"cqa-flex-shrink-0 cqa-mt-1\">\n        <mat-icon \n          class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\"\n          [ngStyle]=\"{ color: statusConfig.iconColor }\">\n          {{ icon || statusConfig.icon }}\n        </mat-icon>\n      </div>\n      \n      <!-- Text Content -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <span class=\"cqa-text-base cqa-leading-6 cqa-text-[#101828] cqa-tracking-normal\">\n          {{ title }}\n        </span>\n        <span class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-[#4A5565] cqa-tracking-normal\">\n          {{ description }}\n        </span>\n      </div>\n    </div>\n    \n    <!-- Right Section: Status Badge -->\n    <div class=\"cqa-flex-shrink-0\">\n      <span \n        class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-leading-4 cqa-tracking-normal\"\n        [ngStyle]=\"{ color: statusConfig.statusColor, backgroundColor: statusConfig.statusBgColor}\">\n        {{ statusConfig.label }}\n      </span>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+StepStatusCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepStatusCardComponent, selector: "cqa-step-status-card", inputs: { title: "title", description: "description", type: "type", icon: "icon" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-p-4 cqa-rounded-[14px] cqa-shadow cqa-flex cqa-items-center cqa-justify-between cqa-transition-all\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Left Section: Icon and Text -->\n    <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-flex-1\">\n      <!-- Icon -->\n      <div class=\"cqa-mt-1\">\n        <mat-icon \n          *ngIf=\"icon || statusConfig?.icon\"\n          class=\"!cqa-text-[20px] cqa-w-[20px] cqa-h-[20px]\"\n          [ngClass]=\"{ 'cqa-animate-spin': type === 'running' }\"\n          [ngStyle]=\"{ color: statusConfig?.iconColor }\">\n          {{ icon || statusConfig?.icon }}\n        </mat-icon>\n\n        <svg *ngIf=\"type === 'running' && !icon\" class=\"cqa-animate-spin\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" \n          fill=\"none\" [attr.stroke]=\"statusConfig?.iconColor\" stroke-width=\"2\">\n          <path d=\"M21 12a9 9 0 1 1-6.219-8.56\"></path>\n        </svg>\n      </div>\n      \n      <!-- Text Content -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <span class=\"cqa-text-base cqa-leading-6 cqa-text-[#101828] cqa-tracking-normal\">\n          {{ title }}\n        </span>\n        <span class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-[#4A5565] cqa-tracking-normal\">\n          {{ description }}\n        </span>\n      </div>\n    </div>\n    \n    <!-- Right Section: Status Badge -->\n    <div class=\"cqa-flex-shrink-0\">\n      <span \n        class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-leading-4 cqa-tracking-normal\"\n        [ngStyle]=\"{ color: statusConfig?.statusColor, backgroundColor: statusConfig?.statusBgColor}\">\n        {{ statusConfig?.label }}\n      </span>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepStatusCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-status-card', template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-p-4 cqa-rounded-[14px] cqa-shadow cqa-flex cqa-items-center cqa-justify-between cqa-transition-all\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Left Section: Icon and Text -->\n    <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-flex-1\">\n      <!-- Icon -->\n      <div class=\"cqa-flex-shrink-0 cqa-mt-1\">\n        <mat-icon \n          class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\"\n          [ngStyle]=\"{ color: statusConfig.iconColor }\">\n          {{ icon || statusConfig.icon }}\n        </mat-icon>\n      </div>\n      \n      <!-- Text Content -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <span class=\"cqa-text-base cqa-leading-6 cqa-text-[#101828] cqa-tracking-normal\">\n          {{ title }}\n        </span>\n        <span class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-[#4A5565] cqa-tracking-normal\">\n          {{ description }}\n        </span>\n      </div>\n    </div>\n    \n    <!-- Right Section: Status Badge -->\n    <div class=\"cqa-flex-shrink-0\">\n      <span \n        class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-leading-4 cqa-tracking-normal\"\n        [ngStyle]=\"{ color: statusConfig.statusColor, backgroundColor: statusConfig.statusBgColor}\">\n        {{ statusConfig.label }}\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-step-status-card', template: "<div class=\"cqa-ui-root\">\n  <div \n    class=\"cqa-p-4 cqa-rounded-[14px] cqa-shadow cqa-flex cqa-items-center cqa-justify-between cqa-transition-all\"\n    [ngStyle]=\"cardStyles\">\n    \n    <!-- Left Section: Icon and Text -->\n    <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-flex-1\">\n      <!-- Icon -->\n      <div class=\"cqa-mt-1\">\n        <mat-icon \n          *ngIf=\"icon || statusConfig?.icon\"\n          class=\"!cqa-text-[20px] cqa-w-[20px] cqa-h-[20px]\"\n          [ngClass]=\"{ 'cqa-animate-spin': type === 'running' }\"\n          [ngStyle]=\"{ color: statusConfig?.iconColor }\">\n          {{ icon || statusConfig?.icon }}\n        </mat-icon>\n\n        <svg *ngIf=\"type === 'running' && !icon\" class=\"cqa-animate-spin\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" \n          fill=\"none\" [attr.stroke]=\"statusConfig?.iconColor\" stroke-width=\"2\">\n          <path d=\"M21 12a9 9 0 1 1-6.219-8.56\"></path>\n        </svg>\n      </div>\n      \n      <!-- Text Content -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <span class=\"cqa-text-base cqa-leading-6 cqa-text-[#101828] cqa-tracking-normal\">\n          {{ title }}\n        </span>\n        <span class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-[#4A5565] cqa-tracking-normal\">\n          {{ description }}\n        </span>\n      </div>\n    </div>\n    \n    <!-- Right Section: Status Badge -->\n    <div class=\"cqa-flex-shrink-0\">\n      <span \n        class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-leading-4 cqa-tracking-normal\"\n        [ngStyle]=\"{ color: statusConfig?.statusColor, backgroundColor: statusConfig?.statusBgColor}\">\n        {{ statusConfig?.label }}\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{