@cqa-lib/cqa-ui 1.1.383 → 1.1.385

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

@@ -2183,7 +2183,7 @@ class DynamicSelectFieldComponent {
         catch (_b) { }
     }
     onSelectOpenedChange(opened, _select) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (opened) {
             // Emit click event when select is opened (clicked)
             this.selectClick.emit();
@@ -2204,12 +2204,17 @@ class DynamicSelectFieldComponent {
                 this.outsideCleanup();
                 this.outsideCleanup = undefined;
             }
+            // Remove document keyboard listener
+            if (this.documentKeydownListener) {
+                document.removeEventListener('keydown', this.documentKeydownListener);
+                this.documentKeydownListener = undefined;
+            }
             // Disconnect load-more observer if any
             if (this.loadMoreObserver) {
                 try {
                     this.loadMoreObserver.disconnect();
                 }
-                catch (_k) { }
+                catch (_l) { }
                 this.loadMoreObserver = undefined;
             }
             // Remove scroll listener if attached
@@ -2217,7 +2222,7 @@ class DynamicSelectFieldComponent {
                 try {
                     this.panelScrollEl.removeEventListener('scroll', this.onPanelScroll);
                 }
-                catch (_l) { }
+                catch (_m) { }
                 this.panelScrollEl = undefined;
             }
             // Reset load-more state when closing
@@ -2239,7 +2244,7 @@ class DynamicSelectFieldComponent {
             try {
                 (_f = (_e = this.config).onSearch) === null || _f === void 0 ? void 0 : _f.call(_e, '');
             }
-            catch (_m) { }
+            catch (_o) { }
             this.searchChange.emit({ key, query: '' });
         }
         else if (this.toBoolean((_g = this.config) === null || _g === void 0 ? void 0 : _g.initialFetchOnOpen)) {
@@ -2249,7 +2254,7 @@ class DynamicSelectFieldComponent {
             try {
                 (_j = (_h = this.config).onSearch) === null || _j === void 0 ? void 0 : _j.call(_h, q);
             }
-            catch (_o) { }
+            catch (_p) { }
             this.searchChange.emit({ key, query: q });
         }
         this.sentinelCurrentlyInView = false;
@@ -2267,6 +2272,10 @@ class DynamicSelectFieldComponent {
             }
             catch (_a) { }
         }, 0);
+        // Setup document-level keyboard listener for arrow key navigation when search input is not focused
+        if ((_k = this.config) === null || _k === void 0 ? void 0 : _k.searchable) {
+            this.setupDocumentKeydownListener();
+        }
     }
     onSearch(key, value) {
         var _a, _b, _c, _d;
@@ -2283,6 +2292,101 @@ class DynamicSelectFieldComponent {
             this.lastOptionsLength = (((_d = this.config) === null || _d === void 0 ? void 0 : _d.options) || []).length;
         }
     }
+    /**
+     * Handles keyboard events on the search input to enable navigation with arrow keys
+     * and selection with Enter key, while still allowing typing in the search box.
+     */
+    onSearchInputKeydown(event) {
+        const key = event.key;
+        // Handle navigation and selection keys
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            // Stop the event completely before doing anything
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            // Navigate immediately (synchronously) to prevent Angular Material from processing
+            this.navigateOptions(key === 'ArrowDown' ? 1 : -1);
+            // Blur the search input after navigation to allow subsequent arrow keys to work naturally
+            const input = event.target;
+            if (input) {
+                // Use requestAnimationFrame to blur after our navigation completes
+                requestAnimationFrame(() => {
+                    input.blur();
+                });
+            }
+            return;
+        }
+        if (key === 'Enter') {
+            event.preventDefault();
+            // Blur the search input
+            const input = event.target;
+            if (input) {
+                input.blur();
+            }
+            // Find and select the active option
+            setTimeout(() => {
+                const panel = document.querySelector('.mat-select-panel');
+                if (panel) {
+                    const activeOption = panel.querySelector('.mat-option.mat-active:not(.mat-option-disabled)');
+                    if (activeOption) {
+                        activeOption.click();
+                    }
+                    else {
+                        // If no active option, try to select the first enabled option
+                        const firstOption = panel.querySelector('.mat-option:not(.mat-option-disabled):not(.ts-select-search)');
+                        if (firstOption) {
+                            firstOption.click();
+                        }
+                    }
+                }
+            }, 10);
+            return;
+        }
+        // For Escape, allow it to propagate (mat-select will close the panel)
+        if (key === 'Escape') {
+            return;
+        }
+        // For all other keys (typing), stop propagation to allow search input to work normally
+        event.stopPropagation();
+    }
+    /**
+     * Manually navigates through options when arrow keys are pressed from search input.
+     * @param direction 1 for down, -1 for up
+     */
+    navigateOptions(direction) {
+        const panel = document.querySelector('.mat-select-panel');
+        if (!panel)
+            return;
+        // Get all enabled, non-disabled options (excluding search input)
+        const allOptions = Array.from(panel.querySelectorAll('.mat-option:not(.mat-option-disabled):not(.ts-select-search)'));
+        if (allOptions.length === 0)
+            return;
+        // Find currently active option
+        let currentIndex = allOptions.findIndex(opt => opt.classList.contains('mat-active'));
+        // If no active option, start at the first one (for down) or last one (for up)
+        if (currentIndex === -1) {
+            currentIndex = direction === 1 ? -1 : allOptions.length;
+        }
+        // Calculate next index
+        const nextIndex = currentIndex + direction;
+        // Bounds check
+        if (nextIndex < 0 || nextIndex >= allOptions.length) {
+            return;
+        }
+        // Remove active class from all options
+        allOptions.forEach(opt => opt.classList.remove('mat-active'));
+        // Add active class to the target option
+        const targetOption = allOptions[nextIndex];
+        targetOption.classList.add('mat-active');
+        // Scroll the option into view if needed
+        targetOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        // Focus the option so Angular Material's keyboard manager can handle subsequent arrow keys
+        // Focusing an option doesn't trigger selection in Angular Material - only click/Enter does
+        // Use setTimeout to ensure the DOM is updated first
+        setTimeout(() => {
+            targetOption.focus();
+        }, 0);
+    }
     /**
      * Returns the currently selected option ids for the configured control.
      */
@@ -2526,6 +2630,76 @@ class DynamicSelectFieldComponent {
         var _a;
         return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.highlightPattern);
     }
+    /**
+     * Sets up a document-level keyboard listener to handle arrow key navigation
+     * when the panel is open and the search input is not focused.
+     */
+    setupDocumentKeydownListener() {
+        if (this.documentKeydownListener) {
+            document.removeEventListener('keydown', this.documentKeydownListener);
+        }
+        this.documentKeydownListener = (event) => {
+            var _a, _b, _c;
+            // Only handle if panel is open
+            if (!((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.panelOpen)) {
+                return;
+            }
+            // Only handle arrow keys and Enter
+            if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Enter') {
+                return;
+            }
+            // Don't handle if the search input is focused (it has its own handler)
+            const activeElement = document.activeElement;
+            if (activeElement && activeElement.classList.contains('ts-select-search-input')) {
+                return;
+            }
+            // Don't handle if user is typing in another input
+            if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
+                return;
+            }
+            // Check if the event is related to our select panel
+            const target = event.target;
+            const panel = document.querySelector('.mat-select-panel');
+            if (!panel) {
+                return;
+            }
+            // Only handle if the event target is within our component or the panel
+            const isInOurComponent = ((_c = (_b = this.hostEl) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.contains(target)) || panel.contains(target);
+            if (!isInOurComponent && target !== document.body && target !== document.documentElement) {
+                return;
+            }
+            // Handle arrow keys for navigation
+            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                // Check if an option is currently focused - if so, let Angular Material handle it
+                const focusedOption = panel.querySelector('.mat-option:focus');
+                if (focusedOption) {
+                    // Let Angular Material handle it naturally when an option is focused
+                    return;
+                }
+                // Only intercept when no option is focused (e.g., after blurring search input)
+                // Stop the event completely to prevent Angular Material from also processing it
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                this.navigateOptions(event.key === 'ArrowDown' ? 1 : -1);
+                return;
+            }
+            // Handle Enter for selection
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                if (panel) {
+                    const activeOption = panel.querySelector('.mat-option.mat-active:not(.mat-option-disabled)');
+                    if (activeOption) {
+                        activeOption.click();
+                    }
+                }
+                return;
+            }
+        };
+        document.addEventListener('keydown', this.documentKeydownListener, true);
+    }
     setupLoadMoreObserver() {
         var _a;
         // Only if consumer indicates more data is available
@@ -2576,10 +2750,10 @@ class DynamicSelectFieldComponent {
     }
 }
 DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore", addCustomValue: "addCustomValue" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore", addCustomValue: "addCustomValue" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"onSearchInputKeydown($event)\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
+            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"onSearchInputKeydown($event)\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
         }], propDecorators: { form: [{
                 type: Input
             }], config: [{
@@ -15755,8 +15929,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class SimulatorComponent {
-    constructor(sanitizer) {
+    constructor(sanitizer, cdr) {
         this.sanitizer = sanitizer;
+        this.cdr = cdr;
         this.videoUrl = '';
         this.videoUrls = [];
         this.videoCurrentDuration = 0;
@@ -16028,8 +16203,25 @@ class SimulatorComponent {
     get isPlayerSwitching() {
         return this.playerState === 'switching';
     }
-    get shouldApplySmallHeightClasses() {
-        return typeof window !== 'undefined' && window.innerHeight < 600 && this.platformType === 'browser' && this.isLive;
+    get isAspectRatioMatched() {
+        if (typeof window === 'undefined' || !this.effectiveBrowserViewPort)
+            return true;
+        const windowAr = window.innerWidth / window.innerHeight;
+        const viewportAr = this.effectiveBrowserViewPort.width / this.effectiveBrowserViewPort.height;
+        const tolerance = 0.15;
+        return Math.abs(windowAr - viewportAr) / viewportAr < tolerance;
+    }
+    get liveContentContainerStyle() {
+        if (typeof window === 'undefined' || !this.isLive || this.platformType !== 'browser') {
+            return {};
+        }
+        if (!this.isAspectRatioMatched) {
+            return {
+                maxHeight: `${Math.max(200, window.innerHeight - 200)}px`,
+                height: '100%'
+            };
+        }
+        return {};
     }
     get effectiveBrowserViewPort() {
         const defaultViewport = { width: 1280, height: 720 };
@@ -16043,6 +16235,9 @@ class SimulatorComponent {
         }
         return { width, height };
     }
+    onWindowResize() {
+        this.cdr.markForCheck();
+    }
     get deviceFrameConfig() {
         if (this.platformType === 'browser') {
             return this.deviceFrameConfigs['browser'] || null;
@@ -17419,12 +17614,12 @@ class SimulatorComponent {
         });
     }
 }
-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", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (platformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && platformType === 'device',\n               '!cqa-h-full !cqa-max-h-[500px]': shouldApplySmallHeightClasses\n             }\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && platformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && platformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-max-h-[calc(100%-60px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <video\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n            ></video>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (platformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && platformType === 'device'\n             }\"\n             [ngStyle]=\"liveContentContainerStyle\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && platformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && platformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-max-h-[calc(100%-60px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <video\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n            ></video>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span\n            class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-inline-block\"\n            style=\"width: 40px; text-align: center;\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-2\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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 cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (platformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && platformType === 'device',\n               '!cqa-h-full !cqa-max-h-[500px]': shouldApplySmallHeightClasses\n             }\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && platformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && platformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-max-h-[calc(100%-60px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <video\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n            ></video>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", styles: [] }]
-        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, 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 cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (platformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && platformType === 'device'\n             }\"\n             [ngStyle]=\"liveContentContainerStyle\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && platformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && platformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-max-h-[calc(100%-60px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <video\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n            ></video>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span\n            class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-inline-block\"\n            style=\"width: 40px; text-align: center;\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-2\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { videoUrl: [{
                 type: Input
             }], videoUrls: [{
                 type: Input
@@ -17483,6 +17678,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], speedControlContainerRef: [{
                 type: ViewChild,
                 args: ['speedControlContainer', { static: false }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class ConsoleAlertComponent {