@cqa-lib/cqa-ui 1.1.269 → 1.1.271

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

@@ -28,17 +28,17 @@ import * as i3$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$4 from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i9$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i15 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i1$5 from '@angular/cdk/overlay';
+import * as i1$6 from '@angular/cdk/overlay';
 import { OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
 import { TemplatePortal, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import * as i2$3 from '@angular/cdk/scrolling';
+import * as i1$4 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i4$1 from 'ngx-typed-js';
 import { NgxTypedJsModule } from 'ngx-typed-js';
@@ -3981,6 +3981,499 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+class WorkspaceSelectorComponent {
+    constructor() {
+        /** Emits the selected workspace object when selection changes */
+        this.valueChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.selectClick = new EventEmitter();
+        /** Emits when user types in search box (useful for server search) */
+        this.searchChange = new EventEmitter();
+        /** Emits when the component requests more data for the current query */
+        this.loadMore = new EventEmitter();
+        this.searchText = '';
+        this.isOpen = false;
+        this.loadingMore = false;
+        this.lastOptionsLength = 0;
+        this.hasScrolledSinceOpen = false;
+        this.onPanelScroll = () => {
+            this.hasScrolledSinceOpen = true;
+            if (!this.config?.hasMore || this.loadingMore)
+                return;
+            const el = this.panelScrollEl;
+            if (!el)
+                return;
+            const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 48;
+            if (nearBottom) {
+                this.loadingMore = true;
+                const key = this.config?.key || '';
+                const q = this.searchText || '';
+                this.loadMore.emit({ key, query: q });
+                try {
+                    this.config.onLoadMore?.(q);
+                }
+                catch { }
+            }
+        };
+        this.trackByOption = (index, opt) => {
+            if (!opt)
+                return `index-${index}`;
+            // Use a simple identifier that doesn't require calling methods
+            return opt.id ?? opt.value ?? `option-${index}`;
+        };
+        this.internalControl = new FormControl();
+        this.internalForm = new FormGroup({
+            value: this.internalControl
+        });
+    }
+    ngOnInit() {
+        if (!this.config) {
+            throw new Error('cqa-workspace-selector: input "config" is required.');
+        }
+        this.syncValueFromInput();
+        this.applySelectedValueIfNeeded();
+        this.syncDisabledState();
+        this.lastOptionsLength = (this.config?.options || []).length;
+    }
+    ngOnChanges(changes) {
+        if ('config' in changes || 'form' in changes || 'value' in changes) {
+            this.syncDisabledState();
+        }
+        if ('value' in changes && !this.form) {
+            // Sync internal control when value changes (for direct binding mode)
+            this.syncValueFromInput();
+        }
+        if ('config' in changes) {
+            this.syncControlValueForMultipleMode();
+            this.applySelectedValueIfNeeded();
+            if (this.config?.isLoading !== undefined) {
+                this.loadingMore = this.config.isLoading;
+            }
+            const len = (this.config?.options || []).length;
+            if (len > this.lastOptionsLength) {
+                if (this.config?.isLoading === false) {
+                    this.loadingMore = false;
+                }
+                else if (this.config?.isLoading === undefined) {
+                    this.loadingMore = false;
+                }
+            }
+            this.lastOptionsLength = len;
+            if (!this.config?.hasMore) {
+                if (this.config?.isLoading === false) {
+                    this.loadingMore = false;
+                }
+                else if (this.config?.isLoading === undefined) {
+                    this.loadingMore = false;
+                }
+            }
+        }
+        if ('form' in changes && !changes['form'].firstChange) {
+            this.applySelectedValueIfNeeded();
+        }
+    }
+    syncValueFromInput() {
+        if (!this.form && this.value !== undefined) {
+            // Sync the internal control with the direct value binding
+            // Ensure value is not an array (single selection only)
+            if (Array.isArray(this.value)) {
+                this.value = this.value.length ? this.value[0] : null;
+            }
+            this.internalControl.setValue(this.value ?? null, { emitEvent: false });
+        }
+    }
+    get currentForm() {
+        return this.form || this.internalForm;
+    }
+    get controlKey() {
+        return this.config?.key || 'value';
+    }
+    get currentControl() {
+        return this.currentForm.get(this.controlKey) || this.internalControl;
+    }
+    /** Get current value - from form control if form provided, otherwise from direct value binding */
+    get currentValue() {
+        if (this.form) {
+            return this.currentControl.value;
+        }
+        // Ensure value is not an array (single selection only)
+        if (Array.isArray(this.value)) {
+            return this.value.length ? this.value[0] : null;
+        }
+        return this.value ?? null;
+    }
+    /** Set current value - to form control if form provided, otherwise update direct value */
+    set currentValue(val) {
+        if (this.form) {
+            this.currentControl.setValue(val, { emitEvent: false });
+        }
+        else {
+            // Ensure value is not an array (single selection only)
+            this.value = Array.isArray(val) ? (val.length ? val[0] : null) : val;
+            // Sync internal control for display purposes
+            this.internalControl.setValue(this.value, { emitEvent: false });
+        }
+    }
+    get isDisabled() {
+        return this.toBoolean(this.config?.disabled);
+    }
+    get displayPlaceholder() {
+        const currentVal = this.currentValue;
+        return this.hasExistingValue(currentVal) ? undefined : (this.config?.placeholder || 'Select...');
+    }
+    get displayValue() {
+        const value = this.currentValue;
+        if (value == null)
+            return '';
+        // If value is already a SelectOption-like object with name/label, use it directly
+        if (typeof value === 'object' && value !== null) {
+            const workspaceObj = value;
+            if (workspaceObj.name || workspaceObj.label) {
+                return workspaceObj.name ?? workspaceObj.label ?? String(workspaceObj.value ?? workspaceObj.id ?? '');
+            }
+        }
+        // Otherwise, look up the value in options list
+        const option = this.config?.options?.find(opt => this.getOptionValue(opt) === value);
+        return option ? this.getOptionLabel(option) : String(value);
+    }
+    get itemSize() {
+        return this.config?.itemSize || 35;
+    }
+    get viewportHeight() {
+        // If viewportHeight is explicitly set in config, use it
+        if (this.config?.viewportHeight !== undefined) {
+            return this.config.viewportHeight;
+        }
+        // Otherwise, calculate based on number of options
+        const optionCount = this.displayedOptions.length;
+        const maxHeight = 300; // Maximum height
+        const minHeight = 100; // Minimum height
+        const calculatedHeight = optionCount * this.itemSize;
+        // Return calculated height, but clamp between min and max
+        return Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
+    }
+    get displayedOptions() {
+        return this.filteredOptions();
+    }
+    toBoolean(value) {
+        if (typeof value === 'string') {
+            const v = value.trim().toLowerCase();
+            if (v === 'true' || v === '1')
+                return true;
+            if (v === 'false' || v === '0' || v === '')
+                return false;
+            return true;
+        }
+        if (typeof value === 'number') {
+            return value !== 0;
+        }
+        return !!value;
+    }
+    getOptionValue(opt) {
+        if (!opt)
+            return undefined;
+        if (this.config?.valueBy) {
+            return opt[this.config.valueBy];
+        }
+        return opt.id ?? opt.value;
+    }
+    getOptionLabel(opt) {
+        return opt.name ?? opt.label ?? opt.value ?? '';
+    }
+    syncDisabledState() {
+        const shouldDisable = this.toBoolean(this.config?.disabled);
+        if (this.form) {
+            if (shouldDisable) {
+                this.currentControl.disable({ emitEvent: false });
+            }
+            else {
+                this.currentControl.enable({ emitEvent: false });
+            }
+        }
+        // For direct value binding, disabled state is handled via [disabled] binding in template
+    }
+    syncControlValueForMultipleMode() {
+        // No longer needed - single selection only
+        const currentVal = this.currentValue;
+        if (Array.isArray(currentVal)) {
+            this.currentValue = currentVal.length ? currentVal[0] : null;
+        }
+    }
+    applySelectedValueIfNeeded() {
+        const currentVal = this.currentValue;
+        if (this.hasExistingValue(currentVal)) {
+            return;
+        }
+        // Check both config.selectedValue and direct value input
+        const selectedValue = this.value !== undefined ? this.value : this.config?.selectedValue;
+        if (selectedValue === undefined || selectedValue === null) {
+            return;
+        }
+        // Ensure selectedValue is not an array (single selection only)
+        const normalized = Array.isArray(selectedValue)
+            ? (selectedValue.length ? selectedValue[0] : undefined)
+            : selectedValue;
+        if (normalized === undefined)
+            return;
+        this.currentValue = normalized;
+    }
+    hasExistingValue(value) {
+        if (value === null || value === undefined) {
+            return false;
+        }
+        if (Array.isArray(value)) {
+            return value.some((val) => val !== null && val !== undefined && val !== '');
+        }
+        if (typeof value === 'string') {
+            return value.trim().length > 0;
+        }
+        return true;
+    }
+    isOptionSelected(opt) {
+        const currentVal = this.currentValue;
+        if (currentVal == null)
+            return false;
+        const optionValue = this.getOptionValue(opt);
+        // If currentVal is an object with id/value, extract it for comparison
+        if (typeof currentVal === 'object' && currentVal !== null) {
+            const workspaceObj = currentVal;
+            const currentId = this.config?.valueBy
+                ? workspaceObj[this.config.valueBy]
+                : (workspaceObj.id ?? workspaceObj.value);
+            return currentId === optionValue;
+        }
+        // Otherwise, compare directly
+        return currentVal === optionValue;
+    }
+    filteredOptions() {
+        const t = this.searchText.toLowerCase().trim();
+        const allOptions = this.config.options || [];
+        if (this.config?.serverSearch) {
+            // For server search, return all options as-is (server handles filtering)
+            return allOptions;
+        }
+        if (!t) {
+            // No search - return all options
+            return allOptions;
+        }
+        // Local search - filter options by search text only
+        return allOptions.filter((opt) => {
+            const text = this.getOptionLabel(opt).toLowerCase();
+            return text.includes(t);
+        });
+    }
+    getSelectedIds() {
+        const value = this.currentValue;
+        return value !== undefined && value !== null ? [value] : [];
+    }
+    onOptionClick(opt) {
+        if (this.isDisabled)
+            return;
+        // Emit the full option object (with name, id, etc.) instead of just the value
+        // This allows the parent to receive the complete workspace object
+        const newValue = opt;
+        const selectedOption = opt;
+        // Close dropdown after selection (unless closeOnSelect is false)
+        if (this.config?.closeOnSelect !== false) {
+            this.closeDropdown();
+        }
+        // Update value
+        if (this.form) {
+            this.currentControl.setValue(newValue, { emitEvent: true });
+        }
+        else {
+            this.value = newValue;
+            this.syncValueFromInput();
+        }
+        this.onSelectionChange(newValue, selectedOption);
+    }
+    onSelectionChange(newValue, selectedOption) {
+        const value = newValue !== undefined ? newValue : this.currentValue;
+        // Emit valueChange for two-way binding
+        this.valueChange.emit(value);
+        if (typeof this.config?.onChange === 'function') {
+            try {
+                this.config.onChange(value);
+            }
+            catch (error) {
+                console.error('cqa-workspace-selector onChange handler error:', error);
+            }
+        }
+        this.selectionChange.emit({
+            key: this.config?.key || '',
+            value,
+            option: selectedOption,
+        });
+    }
+    onSearchInput(value) {
+        this.searchText = value ?? '';
+        if (this.config?.serverSearch) {
+            try {
+                this.config.onSearch?.(value ?? '');
+            }
+            catch { }
+            this.searchChange.emit({ key: this.config?.key || '', query: value ?? '' });
+            this.loadingMore = false;
+            this.lastOptionsLength = (this.config?.options || []).length;
+        }
+    }
+    toggleDropdown() {
+        if (this.isDisabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (this.isDisabled)
+            return;
+        this.isOpen = true;
+        this.selectClick.emit();
+        this.hasScrolledSinceOpen = false;
+        if ((this.config?.options || []).length > 0) {
+            this.loadingMore = false;
+        }
+        if (this.config?.serverSearch && this.toBoolean(this.config?.initialFetchOnOpen)) {
+            const q = this.searchText || '';
+            try {
+                this.config.onSearch?.(q);
+            }
+            catch { }
+            this.searchChange.emit({ key: this.config?.key || '', query: q });
+        }
+        setTimeout(() => {
+            this.setupScrollListener();
+            if (this.config?.searchable) {
+                const input = this.dropdownPanel?.nativeElement?.querySelector('.workspace-search-input');
+                input?.focus();
+            }
+        }, 0);
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.searchText = '';
+        if (this.panelScrollEl) {
+            try {
+                this.panelScrollEl.removeEventListener('scroll', this.onPanelScroll);
+            }
+            catch { }
+            this.panelScrollEl = undefined;
+        }
+        this.loadingMore = false;
+    }
+    setupScrollListener() {
+        if (!this.config?.hasMore)
+            return;
+        const panel = this.dropdownPanel?.nativeElement?.querySelector('.workspace-options-container');
+        if (panel) {
+            this.panelScrollEl = panel;
+            panel.addEventListener('scroll', this.onPanelScroll, { passive: true });
+        }
+    }
+    onScrolledIndexChange(index) {
+        this.hasScrolledSinceOpen = true;
+        if (!this.config?.hasMore || this.loadingMore)
+            return;
+        const viewport = this.viewport?.elementRef?.nativeElement;
+        if (!viewport)
+            return;
+        const itemCount = this.displayedOptions.length;
+        const visibleItems = Math.ceil(viewport.clientHeight / this.itemSize);
+        if (index + visibleItems >= itemCount - 1) {
+            this.loadingMore = true;
+            const key = this.config?.key || '';
+            const q = this.searchText || '';
+            this.loadMore.emit({ key, query: q });
+            try {
+                this.config.onLoadMore?.(q);
+            }
+            catch { }
+        }
+    }
+    highlightText(text) {
+        if (!text || !this.config?.highlightPattern) {
+            return this.escapeHtml(text);
+        }
+        const pattern = this.config.highlightPattern;
+        if (typeof pattern === 'function') {
+            return pattern(text);
+        }
+        let regex;
+        if (typeof pattern === 'string') {
+            try {
+                regex = new RegExp(pattern, 'gi');
+            }
+            catch (e) {
+                console.warn('Invalid highlight pattern:', pattern);
+                return this.escapeHtml(text);
+            }
+        }
+        else {
+            regex = pattern;
+        }
+        const escaped = this.escapeHtml(text);
+        return escaped.replace(regex, (match) => `<span class="cqa-text-primary">${match}</span>`);
+    }
+    escapeHtml(text) {
+        if (!text)
+            return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    get hasHighlighting() {
+        return !!this.config?.highlightPattern;
+    }
+    handleDocumentClick(event) {
+        if (!this.isOpen)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        if (this.hostEl?.nativeElement && this.hostEl.nativeElement.contains(target)) {
+            return;
+        }
+        this.closeDropdown();
+    }
+}
+WorkspaceSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WorkspaceSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WorkspaceSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: WorkspaceSelectorComponent, selector: "cqa-workspace-selector", inputs: { form: "form", config: "config", value: "value" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" #host>\n  <ng-container [formGroup]=\"currentForm\">\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    \n    <div class=\"workspace-selector-wrapper cqa-relative cqa-w-full\">\n      <!-- Trigger Button -->\n      <button\n        type=\"button\"\n        class=\"workspace-selector-trigger cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-border-solid cqa-border cqa-border-[#D1D5DB] cqa-rounded-[8px] cqa-bg-white cqa-text-left cqa-cursor-pointer hover:cqa-border-[#9CA3AF] focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#4F46E5] focus:cqa-ring-offset-1 disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n        [disabled]=\"isDisabled\"\n        (click)=\"toggleDropdown()\"\n        [attr.aria-expanded]=\"isOpen\"\n        aria-haspopup=\"listbox\">\n        <span class=\"cqa-flex-1 cqa-truncate cqa-text-[14px] cqa-text-[#0A0A0A]\"\n          [class.cqa-text-[#9CA3AF]]=\"!displayValue\">\n          {{ displayValue || displayPlaceholder }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\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\" class=\"cqa-animate-spin\">\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               [class.cqa-rotate-180]=\"isOpen\">\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      </button>\n\n      <!-- Dropdown Panel -->\n      <div\n        #dropdownPanel\n        *ngIf=\"isOpen\"\n        class=\"workspace-selector-panel cqa-absolute cqa-z-50 cqa-w-full cqa-mt-1 cqa-bg-white cqa-border cqa-border-[#D1D5DB] cqa-rounded-[8px] cqa-shadow-lg cqa-overflow-hidden\">\n        \n        <!-- Search Input -->\n        <div *ngIf=\"config.searchable\" class=\"workspace-search-container cqa-p-2 cqa-border-b cqa-border-[#E5E7EB]\">\n          <input\n            type=\"text\"\n            class=\"workspace-search-input cqa-w-full cqa-px-3 cqa-py-2 cqa-border cqa-border-[#D1D5DB] cqa-rounded-[6px] cqa-text-[14px] cqa-text-[#0A0A0A] focus:cqa-outline-none\"\n            placeholder=\"Search...\"\n            [value]=\"searchText\"\n            (input)=\"onSearchInput($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" />\n        </div>\n\n        <!-- Options Container with Virtual Scroll -->\n        <div class=\"workspace-options-container\">\n          <!-- No results state -->\n          <div *ngIf=\"displayedOptions.length === 0 && !(config?.isLoading || loadingMore)\"\n            class=\"cqa-px-4 cqa-py-3 cqa-text-[14px] cqa-text-[#9CA3AF] cqa-text-center\">\n            No results\n          </div>\n\n          <cdk-virtual-scroll-viewport\n            *ngIf=\"displayedOptions.length > 0\"\n            #viewport\n            [itemSize]=\"itemSize\"\n            minBufferPx=\"200\"\n            maxBufferPx=\"400\"\n            [style.height.px]=\"viewportHeight\"\n            style=\"width: 100%; display: block; overflow: auto;\"\n            (scrolledIndexChange)=\"onScrolledIndexChange($event)\">\n            \n            <div\n              *cdkVirtualFor=\"let opt of displayedOptions; trackBy: trackByOption\"\n              class=\"workspace-option cqa-px-4 cqa-py-3 cqa-cursor-pointer hover:cqa-bg-[#F3F4F6] cqa-border-b cqa-border-[#E5E7EB] last:cqa-border-b-0\"\n              [style.height.px]=\"itemSize\"\n              [style.display]=\"'flex'\"\n              [style.align-items]=\"'center'\"\n              [class.cqa-bg-[#F3F4F6]]=\"isOptionSelected(opt)\"\n              [class.cqa-bg-[#EEF2FF]]=\"isOptionSelected(opt)\"\n              (click)=\"onOptionClick(opt)\">\n              <span class=\"cqa-text-[14px] cqa-text-[#0A0A0A]\"\n                *ngIf=\"hasHighlighting\"\n                [innerHTML]=\"highlightText(getOptionLabel(opt))\"></span>\n              <span class=\"cqa-text-[14px] cqa-text-[#0A0A0A]\"\n                *ngIf=\"!hasHighlighting\">\n                {{ getOptionLabel(opt) }}\n              </span>\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          <!-- Loading more indicator -->\n          <div *ngIf=\"config?.hasMore && (loadingMore || config?.isLoading) && displayedOptions.length > 0\"\n            class=\"cqa-px-4 cqa-py-3 cqa-text-[14px] cqa-text-[#6B7280] cqa-text-center cqa-border-t cqa-border-[#E5E7EB]\">\n            Loading...\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n", components: [{ type: i1$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], 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$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i1$4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WorkspaceSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-workspace-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" #host>\n  <ng-container [formGroup]=\"currentForm\">\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    \n    <div class=\"workspace-selector-wrapper cqa-relative cqa-w-full\">\n      <!-- Trigger Button -->\n      <button\n        type=\"button\"\n        class=\"workspace-selector-trigger cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-border-solid cqa-border cqa-border-[#D1D5DB] cqa-rounded-[8px] cqa-bg-white cqa-text-left cqa-cursor-pointer hover:cqa-border-[#9CA3AF] focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#4F46E5] focus:cqa-ring-offset-1 disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n        [disabled]=\"isDisabled\"\n        (click)=\"toggleDropdown()\"\n        [attr.aria-expanded]=\"isOpen\"\n        aria-haspopup=\"listbox\">\n        <span class=\"cqa-flex-1 cqa-truncate cqa-text-[14px] cqa-text-[#0A0A0A]\"\n          [class.cqa-text-[#9CA3AF]]=\"!displayValue\">\n          {{ displayValue || displayPlaceholder }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\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\" class=\"cqa-animate-spin\">\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               [class.cqa-rotate-180]=\"isOpen\">\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      </button>\n\n      <!-- Dropdown Panel -->\n      <div\n        #dropdownPanel\n        *ngIf=\"isOpen\"\n        class=\"workspace-selector-panel cqa-absolute cqa-z-50 cqa-w-full cqa-mt-1 cqa-bg-white cqa-border cqa-border-[#D1D5DB] cqa-rounded-[8px] cqa-shadow-lg cqa-overflow-hidden\">\n        \n        <!-- Search Input -->\n        <div *ngIf=\"config.searchable\" class=\"workspace-search-container cqa-p-2 cqa-border-b cqa-border-[#E5E7EB]\">\n          <input\n            type=\"text\"\n            class=\"workspace-search-input cqa-w-full cqa-px-3 cqa-py-2 cqa-border cqa-border-[#D1D5DB] cqa-rounded-[6px] cqa-text-[14px] cqa-text-[#0A0A0A] focus:cqa-outline-none\"\n            placeholder=\"Search...\"\n            [value]=\"searchText\"\n            (input)=\"onSearchInput($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" />\n        </div>\n\n        <!-- Options Container with Virtual Scroll -->\n        <div class=\"workspace-options-container\">\n          <!-- No results state -->\n          <div *ngIf=\"displayedOptions.length === 0 && !(config?.isLoading || loadingMore)\"\n            class=\"cqa-px-4 cqa-py-3 cqa-text-[14px] cqa-text-[#9CA3AF] cqa-text-center\">\n            No results\n          </div>\n\n          <cdk-virtual-scroll-viewport\n            *ngIf=\"displayedOptions.length > 0\"\n            #viewport\n            [itemSize]=\"itemSize\"\n            minBufferPx=\"200\"\n            maxBufferPx=\"400\"\n            [style.height.px]=\"viewportHeight\"\n            style=\"width: 100%; display: block; overflow: auto;\"\n            (scrolledIndexChange)=\"onScrolledIndexChange($event)\">\n            \n            <div\n              *cdkVirtualFor=\"let opt of displayedOptions; trackBy: trackByOption\"\n              class=\"workspace-option cqa-px-4 cqa-py-3 cqa-cursor-pointer hover:cqa-bg-[#F3F4F6] cqa-border-b cqa-border-[#E5E7EB] last:cqa-border-b-0\"\n              [style.height.px]=\"itemSize\"\n              [style.display]=\"'flex'\"\n              [style.align-items]=\"'center'\"\n              [class.cqa-bg-[#F3F4F6]]=\"isOptionSelected(opt)\"\n              [class.cqa-bg-[#EEF2FF]]=\"isOptionSelected(opt)\"\n              (click)=\"onOptionClick(opt)\">\n              <span class=\"cqa-text-[14px] cqa-text-[#0A0A0A]\"\n                *ngIf=\"hasHighlighting\"\n                [innerHTML]=\"highlightText(getOptionLabel(opt))\"></span>\n              <span class=\"cqa-text-[14px] cqa-text-[#0A0A0A]\"\n                *ngIf=\"!hasHighlighting\">\n                {{ getOptionLabel(opt) }}\n              </span>\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          <!-- Loading more indicator -->\n          <div *ngIf=\"config?.hasMore && (loadingMore || config?.isLoading) && displayedOptions.length > 0\"\n            class=\"cqa-px-4 cqa-py-3 cqa-text-[14px] cqa-text-[#6B7280] cqa-text-center cqa-border-t cqa-border-[#E5E7EB]\">\n            Loading...\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { form: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], selectClick: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
+            }], hostEl: [{
+                type: ViewChild,
+                args: ['host', { static: false, read: ElementRef }]
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel', { static: false }]
+            }], viewport: [{
+                type: ViewChild,
+                args: ['viewport', { static: false }]
+            }], handleDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 class DashboardHeaderComponent {
     constructor() {
         this.title = '';
@@ -3997,14 +4490,11 @@ class DashboardHeaderComponent {
         this.workspaceOptions = [];
         this.workspacePlaceholder = 'Workspace';
         this.workspaceDisabled = false;
-        this.workspaceMultiple = false;
         this.workspaceSearchable = false;
         // Server-side search/load-more support for workspace select
         this.workspaceServerSearch = false;
         this.workspaceHasMore = false;
         this.workspaceIsLoading = false;
-        this.workspaceOptionStyle = 'checkbox';
-        this.workspaceShowSelectAll = false;
         this.workspaceCloseOnSelect = false;
         this.workspaceSearch = new EventEmitter();
         this.workspaceLoadMore = new EventEmitter();
@@ -4030,14 +4520,14 @@ class DashboardHeaderComponent {
             key: 'workspace',
             placeholder: this.workspacePlaceholder,
             disabled: this.workspaceDisabled,
-            multiple: this.workspaceMultiple,
             searchable: this.workspaceSearchable,
             serverSearch: this.workspaceServerSearch,
             hasMore: this.workspaceHasMore,
             isLoading: this.workspaceIsLoading,
-            optionStyle: this.workspaceOptionStyle,
-            showSelectAll: this.workspaceShowSelectAll,
             closeOnSelect: this.workspaceCloseOnSelect,
+            itemSize: this.workspaceItemSize,
+            valueBy: this.workspaceValueBy,
+            viewportHeight: this.workspaceViewportHeight,
             onSearch: (q) => {
                 try {
                     this.workspaceOnSearch?.(q);
@@ -4061,17 +4551,39 @@ class DashboardHeaderComponent {
         if (!ctrl)
             return;
         const val = this.workspaceValue;
-        const normalized = this.workspaceMultiple
-            ? Array.isArray(val) ? val : (val != null ? [val] : [])
-            : (Array.isArray(val) ? (val.length ? val[0] : undefined) : val);
+        // Single selection only - normalize array to single value
+        const normalized = Array.isArray(val) ? (val.length ? val[0] : undefined) : val;
         ctrl.setValue(normalized, { emitEvent: false });
     }
+    onWorkspaceValueChange(value) {
+        this.workspaceValue = value;
+        this.workspaceValueChange.emit(value);
+    }
+    onWorkspaceSelectionChange(event) {
+        // event.value is the full workspace object with name, id, etc.
+        this.workspaceValue = event.value;
+        this.workspaceValueChange.emit(event.value);
+    }
+    onWorkspaceSearchChange(event) {
+        try {
+            this.workspaceOnSearch?.(event.query);
+        }
+        catch { }
+        this.workspaceSearch.emit(event.query);
+    }
+    onWorkspaceLoadMore(event) {
+        try {
+            this.workspaceOnLoadMore?.(event.query);
+        }
+        catch { }
+        this.workspaceLoadMore.emit(event.query);
+    }
 }
 DashboardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", helpIconTooltip: "helpIconTooltip", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", workspaceServerSearch: "workspaceServerSearch", workspaceHasMore: "workspaceHasMore", workspaceIsLoading: "workspaceIsLoading", workspaceOptionStyle: "workspaceOptionStyle", workspaceShowSelectAll: "workspaceShowSelectAll", workspaceCloseOnSelect: "workspaceCloseOnSelect", workspaceOnSearch: "workspaceOnSearch", workspaceOnLoadMore: "workspaceOnLoadMore", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceSearch: "workspaceSearch", workspaceLoadMore: "workspaceLoadMore", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,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\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", helpIconTooltip: "helpIconTooltip", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceSearchable: "workspaceSearchable", workspaceServerSearch: "workspaceServerSearch", workspaceHasMore: "workspaceHasMore", workspaceIsLoading: "workspaceIsLoading", workspaceCloseOnSelect: "workspaceCloseOnSelect", workspaceOnSearch: "workspaceOnSearch", workspaceOnLoadMore: "workspaceOnLoadMore", workspaceItemSize: "workspaceItemSize", workspaceValueBy: "workspaceValueBy", workspaceViewportHeight: "workspaceViewportHeight", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceSearch: "workspaceSearch", workspaceLoadMore: "workspaceLoadMore", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n        <cqa-workspace-selector \n          [form]=\"workspaceForm\" \n          [config]=\"workspaceConfig\" \n          [value]=\"workspaceValue\"\n          (valueChange)=\"onWorkspaceValueChange($event)\"\n          (selectionChange)=\"onWorkspaceSelectionChange($event)\"\n          (selectClick)=\"workspaceSelectClick.emit()\"\n          (searchChange)=\"onWorkspaceSearchChange($event)\"\n          (loadMore)=\"onWorkspaceLoadMore($event)\">\n        </cqa-workspace-selector>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: WorkspaceSelectorComponent, selector: "cqa-workspace-selector", inputs: ["form", "config", "value"], outputs: ["valueChange", "selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,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\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,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\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector\" class=\"header-dropdown\">\n        <cqa-workspace-selector \n          [form]=\"workspaceForm\" \n          [config]=\"workspaceConfig\" \n          [value]=\"workspaceValue\"\n          (valueChange)=\"onWorkspaceValueChange($event)\"\n          (selectionChange)=\"onWorkspaceSelectionChange($event)\"\n          (selectClick)=\"workspaceSelectClick.emit()\"\n          (searchChange)=\"onWorkspaceSearchChange($event)\"\n          (loadMore)=\"onWorkspaceLoadMore($event)\">\n        </cqa-workspace-selector>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { title: [{
                 type: Input
             }], badgeText: [{
@@ -4104,8 +4616,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], workspaceValue: [{
                 type: Input
-            }], workspaceMultiple: [{
-                type: Input
             }], workspaceSearchable: [{
                 type: Input
             }], workspaceServerSearch: [{
@@ -4114,16 +4624,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], workspaceIsLoading: [{
                 type: Input
-            }], workspaceOptionStyle: [{
-                type: Input
-            }], workspaceShowSelectAll: [{
-                type: Input
             }], workspaceCloseOnSelect: [{
                 type: Input
             }], workspaceOnSearch: [{
                 type: Input
             }], workspaceOnLoadMore: [{
                 type: Input
+            }], workspaceItemSize: [{
+                type: Input
+            }], workspaceValueBy: [{
+                type: Input
+            }], workspaceViewportHeight: [{
+                type: Input
             }], workspaceSearch: [{
                 type: Output
             }], workspaceLoadMore: [{
@@ -5822,7 +6334,7 @@ class ExportCodeModalComponent {
         }
     }
 }
-ExportCodeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExportCodeModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ExportCodeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExportCodeModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$5.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ExportCodeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: { isOpen: "isOpen", cases: "cases", disabled: "disabled" }, outputs: { closeModal: "closeModal", export: "export" }, ngImport: i0, template: "<div *ngIf=\"isOpen || isDialogMode\"\n  [class.modal-backdrop]=\"!isDialogMode\"\n  [class.cqa-fixed]=\"!isDialogMode\"\n  [class.cqa-inset-0]=\"!isDialogMode\"\n  [class.cqa-bg-black]=\"!isDialogMode\"\n  [class.cqa-bg-opacity-50]=\"!isDialogMode\"\n  [class.cqa-flex]=\"!isDialogMode\"\n  [class.cqa-items-center]=\"!isDialogMode\"\n  [class.cqa-justify-center]=\"!isDialogMode\"\n  [class.cqa-p-4]=\"!isDialogMode\"\n  (click)=\"!isDialogMode && onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[600px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh]\"\n    [style.box-shadow]=\"'0px 8px 8px -4px #10182808'\" \n    (click)=\"!isDialogMode && $event.stopPropagation()\">\n\n    <!-- Sticky Header -->\n    <div class=\"cqa-sticky cqa-top-0 cqa-bg-white cqa-mt-2 cqa-z-10 cqa-px-4 cqa-pt-2 cqa-pb-2\">\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n        <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C]\">\n          Export Code\n        </h2>\n        <cqa-button \n          [variant]=\"'text'\"\n          [icon]=\"'close'\"\n          [btnSize]=\"'md'\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <p class=\"cqa-text-sm cqa-text-[#4A5565]\">Choose how you want to export the test case code:</p>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n      <!-- Export Options -->\n      <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n        <div \n          class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n          [class.cqa-border-[#3f43ee]]=\"exportOnLocal\"\n          [class.cqa-bg-[#F0F0FF]]=\"exportOnLocal\"\n          [class.cqa-border-gray-300]=\"!exportOnLocal\"\n          (click)=\"exportOnLocal = true\">\n          <div class=\"cqa-flex cqa-items-center\">\n            <input \n              type=\"radio\" \n              [checked]=\"exportOnLocal\" \n              (click)=\"$event.stopPropagation()\"\n              name=\"exportType\"\n              style=\"pointer-events: none;\"\n              class=\"cqa-mr-2 cqa-cursor-pointer\">\n            <div>\n              <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Download in Local</span>\n            </div>\n          </div>\n        </div>\n        \n        <div \n          class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n          [class.cqa-border-[#3f43ee]]=\"!exportOnLocal\"\n          [class.cqa-bg-[#F0F0FF]]=\"!exportOnLocal\"\n          [class.cqa-border-gray-300]=\"exportOnLocal\"\n          (click)=\"exportOnLocal = false\">\n          <div class=\"cqa-flex cqa-items-center\">\n            <input \n              type=\"radio\" \n              [checked]=\"!exportOnLocal\" \n              name=\"exportType\"\n              style=\"pointer-events: none;\"\n              (click)=\"$event.stopPropagation()\"\n              class=\"cqa-mr-2 cqa-cursor-pointer\">\n            <div>\n              <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Via Email</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Email Input Section (only shown when Via Email is selected) -->\n      <div class=\"cqa-mt-2\" *ngIf=\"!exportOnLocal\">\n        <div class=\"cqa-px-4 cqa-py-2 cqa-bg-gray-50 cqa-rounded-lg\">\n          <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Email Addresses:</div>\n          \n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n            <cqa-custom-input\n              class=\"cqa-flex-1\"\n              [type]=\"'email'\"\n              [placeholder]=\"'Type email and press Enter or Add button'\"\n              [value]=\"emailInputControl.value || ''\"\n              [fullWidth]=\"true\"\n              [errors]=\"getEmailErrors()\"\n              (valueChange)=\"emailInputControl.setValue($event)\"\n              (enterPressed)=\"addEmail()\">\n            </cqa-custom-input>\n            <cqa-button \n              [variant]=\"'outlined'\"\n              [icon]=\"'add'\"\n              [btnSize]=\"'lg'\"\n              [disabled]=\"!emailInputControl.valid || !emailInputControl.value?.trim()\"\n              (clicked)=\"addEmail()\">\n            </cqa-button>\n          </div>\n\n          <!-- Email Validation Error for Empty List -->\n          <div class=\"cqa-text-red-600 cqa-text-xs cqa-mb-2\" *ngIf=\"!exportOnLocal && emailList.length === 0 && showEmailError\">\n            At least one email address is required\n          </div>\n\n          <!-- Email Chips -->\n          <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-mt-2\" *ngIf=\"emailList.length > 0\">\n            <div *ngFor=\"let email of emailList; let i = index\" \n                 class=\"cqa-px-2 cqa-py-1 cqa-bg-[#DFDFFD] cqa-border cqa-border-[#DFDFFD] cqa-rounded-md cqa-flex cqa-items-center\">\n              <span class=\"cqa-text-[#6366F1] cqa-text-[12px]\">{{email}}</span>\n              <cqa-button \n                [variant]=\"'text'\"\n                [icon]=\"'close'\"\n                [btnSize]=\"'sm'\"\n                [iconColor]=\"'#6366F1'\"\n                (clicked)=\"removeEmail(i)\">\n              </cqa-button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Cases List -->\n      <div class=\"cqa-mt-1\" *ngIf=\"cases.length > 0\">\n        <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-rounded-lg\">\n          <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Test Cases to Export ({{cases.length}}):</div>\n          <div class=\"cqa-max-h-[150px] cqa-overflow-y-auto cqa-pr-4\">\n            <div class=\"cqa-py-2 cqa-border-b cqa-border-b-[1px] cqa-border-t-[0px] cqa-border-l-[0px] cqa-border-r-[0px]  cqa-border-solid cqa-border-gray-200 cqa-flex cqa-items-center cqa-gap-2\" *ngFor=\"let case of cases; let i = index\">\n              <span class=\"cqa-font-medium cqa-text-[12px] cqa-text-[#3f43ee] cqa-min-w-[24px]\">{{i + 1}}.</span>\n              <span class=\"cqa-flex-1 cqa-text-[12px] cqa-text-[#0B0B0C]\">{{case.name || 'Unnamed Test Case'}}</span>\n              <span class=\"cqa-text-xs cqa-text-gray-500\" *ngIf=\"case.id\">(C-{{case.id}})</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-4 cqa-py-3 cqa-border-t cqa-border-gray-200 cqa-flex cqa-justify-end cqa-gap-3\">\n      <cqa-button \n        [variant]=\"'outlined'\"\n        [text]=\"'Cancel'\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n      <cqa-button \n        [variant]=\"'filled'\"\n        [text]=\"exportOnLocal ? 'Export' : 'Send'\"\n        [disabled]=\"disabled || isExportDisabled()\"\n        (clicked)=\"handleExport()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExportCodeModalComponent, decorators: [{
             type: Component,
@@ -5832,7 +6344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$4.MatDialogRef, decorators: [{
+                }] }, { type: i1$5.MatDialogRef, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { isOpen: [{
                 type: Input
@@ -8587,12 +9099,12 @@ class VisualDifferenceModalComponent {
         this.currentView = views[nextIndex];
     }
 }
-VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
 VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", ngImport: i0, template: "<div \n  class=\"cqa-ui-root cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-h-[70vh] cqa-w-full cqa-overflow-hidden cqa-font-inter\"\n  (click)=\"$event.stopPropagation()\">\n    \n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n          {{ title }}\n        </h2>\n        <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n      </div>\n      \n      <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n        <button\n          type=\"button\"\n          class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n          (click)=\"onClose(); $event.stopPropagation()\"\n          aria-label=\"Close modal\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n      <button\n        type=\"button\"\n        class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n        (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n        aria-label=\"Previous image\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n        <div *ngIf=\"currentImageUrl\" \n             class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n             [style.transition]=\"'transform 0.2s ease-in-out'\">\n          <img\n            [src]=\"currentImageUrl\"\n            [alt]=\"currentView + ' image'\"\n            class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n            (error)=\"onImageError($event)\"\n          />\n        </div>\n        \n        <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n          <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n            <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n          </svg>\n          <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n        (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n        aria-label=\"Next image\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n      <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n        <img \n          *ngIf=\"hasThumbnailImage('baseline')\"\n          [src]=\"baselineUrl\" \n          alt=\"Baseline image\" \n          class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n          (error)=\"onThumbnailError('baseline', $event)\">\n        <div \n          *ngIf=\"!hasThumbnailImage('baseline')\"\n          class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n            <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n          <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n        </div>\n      </div>\n\n      <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n        <img \n          *ngIf=\"hasThumbnailImage('current')\"\n          [src]=\"currentUrl\" \n          alt=\"Current image\" \n          class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n          (error)=\"onThumbnailError('current', $event)\">\n        <div \n          *ngIf=\"!hasThumbnailImage('current')\"\n          class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n            <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n          <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n        </div>\n      </div>\n\n      <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n        <img \n          *ngIf=\"hasThumbnailImage('difference')\"\n          [src]=\"differenceUrl\" \n          alt=\"Difference image\" \n          class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n          (error)=\"onThumbnailError('difference', $event)\">\n        <div \n          *ngIf=\"!hasThumbnailImage('difference')\"\n          class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n            <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n          <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n        </div>\n      </div>\n    </div>\n</div>\n\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n  class=\"cqa-ui-root cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-h-[70vh] cqa-w-full cqa-overflow-hidden cqa-font-inter\"\n  (click)=\"$event.stopPropagation()\">\n    \n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n          {{ title }}\n        </h2>\n        <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n      </div>\n      \n      <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n        <button\n          type=\"button\"\n          class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n          (click)=\"onClose(); $event.stopPropagation()\"\n          aria-label=\"Close modal\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n      <button\n        type=\"button\"\n        class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n        (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n        aria-label=\"Previous image\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n        <div *ngIf=\"currentImageUrl\" \n             class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n             [style.transition]=\"'transform 0.2s ease-in-out'\">\n          <img\n            [src]=\"currentImageUrl\"\n            [alt]=\"currentView + ' image'\"\n            class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n            (error)=\"onImageError($event)\"\n          />\n        </div>\n        \n        <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n          <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n            <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n          </svg>\n          <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n        (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n        aria-label=\"Next image\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n      <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n        <img \n          *ngIf=\"hasThumbnailImage('baseline')\"\n          [src]=\"baselineUrl\" \n          alt=\"Baseline image\" \n          class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n          (error)=\"onThumbnailError('baseline', $event)\">\n        <div \n          *ngIf=\"!hasThumbnailImage('baseline')\"\n          class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n            <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n          <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n        </div>\n      </div>\n\n      <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n        <img \n          *ngIf=\"hasThumbnailImage('current')\"\n          [src]=\"currentUrl\" \n          alt=\"Current image\" \n          class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n          (error)=\"onThumbnailError('current', $event)\">\n        <div \n          *ngIf=\"!hasThumbnailImage('current')\"\n          class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n            <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n          <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n        </div>\n      </div>\n\n      <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n        <img \n          *ngIf=\"hasThumbnailImage('difference')\"\n          [src]=\"differenceUrl\" \n          alt=\"Difference image\" \n          class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n          (error)=\"onThumbnailError('difference', $event)\">\n        <div \n          *ngIf=\"!hasThumbnailImage('difference')\"\n          class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n            <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n          <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n        </div>\n      </div>\n    </div>\n</div>\n\n", styles: [] }]
-        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -8724,12 +9236,12 @@ class VisualComparisonComponent {
         });
     }
 }
-VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-h-0 cqa-h-[calc(100%-24px)]\">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373] cqa-shrink-0\">Console</div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n      \n      <cdk-virtual-scroll-viewport\n        *ngIf=\"logs?.length\"\n        itemSize=\"28\"\n        minBufferPx=\"200\"\n        maxBufferPx=\"300\"\n        class=\"cqa-h-full cqa-w-full cqa-overflow-x-hidden\" style=\"scrollbar-width: thin;\">\n        <div *cdkVirtualFor=\"let log of logs; trackBy: trackByLogIndex\" \n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words cqa-overflow-hidden\" \n          [ngClass]=\"getLogClass(log.level)\">\n          {{ log.message }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], components: [{ type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-h-0 cqa-h-[calc(100%-24px)]\">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373] cqa-shrink-0\">Console</div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n      \n      <cdk-virtual-scroll-viewport\n        *ngIf=\"logs?.length\"\n        itemSize=\"28\"\n        minBufferPx=\"200\"\n        maxBufferPx=\"300\"\n        class=\"cqa-h-full cqa-w-full cqa-overflow-x-hidden\" style=\"scrollbar-width: thin;\">\n        <div *cdkVirtualFor=\"let log of logs; trackBy: trackByLogIndex\" \n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words cqa-overflow-hidden\" \n          [ngClass]=\"getLogClass(log.level)\">\n          {{ log.message }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], components: [{ type: i1$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i1$4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-h-0 cqa-h-[calc(100%-24px)]\">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373] cqa-shrink-0\">Console</div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n      \n      <cdk-virtual-scroll-viewport\n        *ngIf=\"logs?.length\"\n        itemSize=\"28\"\n        minBufferPx=\"200\"\n        maxBufferPx=\"300\"\n        class=\"cqa-h-full cqa-w-full cqa-overflow-x-hidden\" style=\"scrollbar-width: thin;\">\n        <div *cdkVirtualFor=\"let log of logs; trackBy: trackByLogIndex\" \n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words cqa-overflow-hidden\" \n          [ngClass]=\"getLogClass(log.level)\">\n          {{ log.message }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }]; }, propDecorators: { screenshots: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.MatDialog }]; }, propDecorators: { screenshots: [{
                 type: Input
             }], logs: [{
                 type: Input
@@ -9161,6 +9673,7 @@ class BasicStepComponent extends BaseStepComponent {
                     remainingSeconds: timeoutSeconds,
                     status: 'running'
                 };
+                this.addDurationToWaitLocatorGroupEntry(subStep);
                 this.processedSubSteps.push(this.waitLocatorGroupEntry);
                 // Tick down every second
                 this.countdownIntervalId = setInterval(() => {
@@ -9190,6 +9703,7 @@ class BasicStepComponent extends BaseStepComponent {
                     const newText = subStep.description || subStep.text || subStep.title;
                     if (newText)
                         this.waitLocatorGroupEntry.description = newText;
+                    this.addDurationToWaitLocatorGroupEntry(subStep);
                 }
                 else {
                     // No active group – push FIND_LOCATOR normally once countdown is cleared
@@ -9213,6 +9727,7 @@ class BasicStepComponent extends BaseStepComponent {
                         if (newText)
                             this.waitLocatorGroupEntry.description = newText;
                         this.waitLocatorGroupEntry.status = 'success';
+                        this.addDurationToWaitLocatorGroupEntry(subStep);
                         this.waitLocatorGroupEntry.remainingSeconds = null;
                         this.clearCountdownTimer();
                         this.waitLocatorGroupEntry = null;
@@ -9314,6 +9829,33 @@ class BasicStepComponent extends BaseStepComponent {
             this.countdownIntervalId = null;
         }
     }
+    addDurationToWaitLocatorGroupEntry(subStep) {
+        if (!this.waitLocatorGroupEntry) {
+            return;
+        }
+        const rawDuration = subStep?.duration;
+        let delta = 0;
+        if (typeof rawDuration === 'number') {
+            delta = rawDuration;
+        }
+        else if (typeof rawDuration === 'string' && rawDuration.trim() !== '') {
+            const parsed = parseFloat(rawDuration);
+            delta = Number.isFinite(parsed) ? parsed : 0;
+        }
+        if (delta <= 0) {
+            return;
+        }
+        const currentRaw = this.waitLocatorGroupEntry.duration;
+        let current = 0;
+        if (typeof currentRaw === 'number') {
+            current = currentRaw;
+        }
+        else if (typeof currentRaw === 'string' && currentRaw.trim() !== '') {
+            const parsedCurrent = parseFloat(currentRaw);
+            current = Number.isFinite(parsedCurrent) ? parsedCurrent : 0;
+        }
+        this.waitLocatorGroupEntry.duration = current + delta;
+    }
     processSubStepsForRunResult() {
         const allSubSteps = (this.subSteps || []);
         this.processedSubStepsForRunResult = [];
@@ -10787,6 +11329,7 @@ class LoopStepComponent extends BaseStepComponent {
                     remainingSeconds: timeoutSeconds,
                     status: 'running'
                 };
+                this.addDurationToWaitLocatorGroupEntry(subStep);
                 this.processedSubSteps.push(this.waitLocatorGroupEntry);
                 // Tick down every second
                 this.countdownIntervalId = setInterval(() => {
@@ -10816,6 +11359,7 @@ class LoopStepComponent extends BaseStepComponent {
                     const newText = subStep.description || subStep.text || subStep.title;
                     if (newText)
                         this.waitLocatorGroupEntry.description = newText;
+                    this.addDurationToWaitLocatorGroupEntry(subStep);
                 }
                 else {
                     // No active group – push FIND_LOCATOR normally once countdown is cleared
@@ -10839,6 +11383,7 @@ class LoopStepComponent extends BaseStepComponent {
                         if (newText)
                             this.waitLocatorGroupEntry.description = newText;
                         this.waitLocatorGroupEntry.status = 'success';
+                        this.addDurationToWaitLocatorGroupEntry(subStep);
                         this.waitLocatorGroupEntry.remainingSeconds = null;
                         this.clearCountdownTimer();
                         this.waitLocatorGroupEntry = null;
@@ -10940,6 +11485,33 @@ class LoopStepComponent extends BaseStepComponent {
             this.countdownIntervalId = null;
         }
     }
+    addDurationToWaitLocatorGroupEntry(subStep) {
+        if (!this.waitLocatorGroupEntry) {
+            return;
+        }
+        const rawDuration = subStep?.duration;
+        let delta = 0;
+        if (typeof rawDuration === 'number') {
+            delta = rawDuration;
+        }
+        else if (typeof rawDuration === 'string' && rawDuration.trim() !== '') {
+            const parsed = parseFloat(rawDuration);
+            delta = Number.isFinite(parsed) ? parsed : 0;
+        }
+        if (delta <= 0) {
+            return;
+        }
+        const currentRaw = this.waitLocatorGroupEntry.duration;
+        let current = 0;
+        if (typeof currentRaw === 'number') {
+            current = currentRaw;
+        }
+        else if (typeof currentRaw === 'string' && currentRaw.trim() !== '') {
+            const parsedCurrent = parseFloat(currentRaw);
+            current = Number.isFinite(parsedCurrent) ? parsedCurrent : 0;
+        }
+        this.waitLocatorGroupEntry.duration = current + delta;
+    }
     processSubStepsForRunResult() {
         if (!this.selectedIteration || !this.selectedIteration.subSteps) {
             this.processedSubStepsForRunResult = [];
@@ -13005,6 +13577,7 @@ class ApiStepComponent extends BaseStepComponent {
                     remainingSeconds: timeoutSeconds,
                     status: 'running'
                 };
+                this.addDurationToWaitLocatorGroupEntry(action);
                 this.processedInitialActions.push(this.waitLocatorGroupEntry);
                 // Tick down every second
                 this.countdownIntervalId = setInterval(() => {
@@ -13034,6 +13607,7 @@ class ApiStepComponent extends BaseStepComponent {
                     const newText = action.description || action.text || action.title;
                     if (newText)
                         this.waitLocatorGroupEntry.description = newText;
+                    this.addDurationToWaitLocatorGroupEntry(action);
                 }
                 else {
                     // No active group – push FIND_LOCATOR normally once countdown is cleared
@@ -13057,6 +13631,7 @@ class ApiStepComponent extends BaseStepComponent {
                         if (newText)
                             this.waitLocatorGroupEntry.description = newText;
                         this.waitLocatorGroupEntry.status = 'success';
+                        this.addDurationToWaitLocatorGroupEntry(action);
                         this.waitLocatorGroupEntry.remainingSeconds = null;
                         this.clearCountdownTimer();
                         this.waitLocatorGroupEntry = null;
@@ -13158,6 +13733,33 @@ class ApiStepComponent extends BaseStepComponent {
             this.countdownIntervalId = null;
         }
     }
+    addDurationToWaitLocatorGroupEntry(action) {
+        if (!this.waitLocatorGroupEntry) {
+            return;
+        }
+        const rawDuration = action?.duration;
+        let delta = 0;
+        if (typeof rawDuration === 'number') {
+            delta = rawDuration;
+        }
+        else if (typeof rawDuration === 'string' && rawDuration.trim() !== '') {
+            const parsed = parseFloat(rawDuration);
+            delta = Number.isFinite(parsed) ? parsed : 0;
+        }
+        if (delta <= 0) {
+            return;
+        }
+        const currentRaw = this.waitLocatorGroupEntry.duration;
+        let current = 0;
+        if (typeof currentRaw === 'number') {
+            current = currentRaw;
+        }
+        else if (typeof currentRaw === 'string' && currentRaw.trim() !== '') {
+            const parsedCurrent = parseFloat(currentRaw);
+            current = Number.isFinite(parsedCurrent) ? parsedCurrent : 0;
+        }
+        this.waitLocatorGroupEntry.duration = current + delta;
+    }
     onJumpToTimestamp(event) {
         event.stopPropagation();
         if (this.jumpToTimestampHandler && this.step?.executedResult?.video_start_time !== undefined && this.step?.executedResult?.video_start_time !== null) {
@@ -13822,6 +14424,7 @@ class LiveExecutionStepComponent extends BaseStepComponent {
                     remainingSeconds: timeoutSeconds,
                     status: 'pending'
                 };
+                this.addDurationToWaitLocatorGroupEntry(subStep);
                 this.processedSubSteps.push(this.waitLocatorGroupEntry);
                 // Tick down every second
                 this.countdownIntervalId = setInterval(() => {
@@ -13852,6 +14455,7 @@ class LiveExecutionStepComponent extends BaseStepComponent {
                     const newText = subStep.text || subStep.description || subStep.title;
                     if (newText)
                         this.waitLocatorGroupEntry.text = newText;
+                    this.addDurationToWaitLocatorGroupEntry(subStep);
                 }
                 else {
                     // No active group – push FIND_LOCATOR normally once countdown is cleared
@@ -13876,6 +14480,7 @@ class LiveExecutionStepComponent extends BaseStepComponent {
                             this.waitLocatorGroupEntry.text = newText;
                         this.waitLocatorGroupEntry.isRunning = false;
                         this.waitLocatorGroupEntry.status = 'success';
+                        this.addDurationToWaitLocatorGroupEntry(subStep);
                         this.waitLocatorGroupEntry.remainingSeconds = null;
                         this.clearCountdownTimer();
                         this.waitLocatorGroupEntry = null;
@@ -13985,6 +14590,33 @@ class LiveExecutionStepComponent extends BaseStepComponent {
             this.countdownIntervalId = null;
         }
     }
+    addDurationToWaitLocatorGroupEntry(subStep) {
+        if (!this.waitLocatorGroupEntry) {
+            return;
+        }
+        const rawDuration = subStep?.duration;
+        let delta = 0;
+        if (typeof rawDuration === 'number') {
+            delta = rawDuration;
+        }
+        else if (typeof rawDuration === 'string' && rawDuration.trim() !== '') {
+            const parsed = parseFloat(rawDuration);
+            delta = Number.isFinite(parsed) ? parsed : 0;
+        }
+        if (delta <= 0) {
+            return;
+        }
+        const currentRaw = this.waitLocatorGroupEntry.duration;
+        let current = 0;
+        if (typeof currentRaw === 'number') {
+            current = currentRaw;
+        }
+        else if (typeof currentRaw === 'string' && currentRaw.trim() !== '') {
+            const parsedCurrent = parseFloat(currentRaw);
+            current = Number.isFinite(parsedCurrent) ? parsedCurrent : 0;
+        }
+        this.waitLocatorGroupEntry.duration = current + delta;
+    }
 }
 LiveExecutionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LiveExecutionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 LiveExecutionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LiveExecutionStepComponent, selector: "cqa-live-execution-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", duration: "duration", expanded: "expanded", subSteps: "subSteps", stepDeleted: "stepDeleted" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\"\n    style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running - Show spinner -->\n      <svg *ngIf=\"status.toLowerCase() === 'running'\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n      <!-- Skipped -->\n      <span *ngIf=\"status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#9CA3AF] cqa-font-medium\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && hasSubSteps\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <!-- Single loop: render all entries in chronological order -->\n      <ng-container *ngFor=\"let subStep of processedSubSteps; trackBy: trackBySubStepId\">\n        <!-- AI_AUTO_HEAL result entries: render with ai-agent-step style -->\n        <cqa-ai-logs-with-reasoning\n          *ngIf=\"subStep.isAiAutoHealResult\"\n          [status]=\"subStep.status\"\n          [text]=\"subStep.text\"\n          [description]=\"subStep.description\"\n          [reasoning]=\"subStep.reasoning\"\n          [duration]=\"subStep.duration\">\n        </cqa-ai-logs-with-reasoning>\n\n        <!-- Regular sub-steps (non-AI_AUTO_HEAL) -->\n        <div\n          *ngIf=\"!subStep.isAiAutoHealResult\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n          <!-- Sub-step Status Icon or Loader -->\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3 cqa-h-3\">\n            <!-- Loader when running -->\n            <svg *ngIf=\"subStep.isRunning\" class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n            \n            <!-- Success Icon when complete -->\n            <svg *ngIf=\"!subStep.isRunning && (subStep?.status?.toLowerCase() === 'passed' || subStep?.status?.toLowerCase() === 'success')\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <svg *ngIf=\"!subStep.isRunning && subStep?.status?.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <!-- Sub-step Description (text from socket) with typing animation -->\n          <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n            <span style=\"display: inline-flex; align-items: baseline; flex-wrap: wrap;\">\n              <ngx-typed-js \n                *ngIf=\"subStep.isRunning && subStep.text\"\n                [strings]=\"[subStep.text]\"\n                [typeSpeed]=\"30\"\n                [showCursor]=\"false\"\n                [fadeOut]=\"false\"\n                style=\"display: inline;\">\n                <span class=\"typing\"></span>\n              </ngx-typed-js>\n              <span *ngIf=\"!subStep.isRunning\" style=\"display: inline;\">{{ subStep.text }}</span>\n              <!-- Countdown remaining for WAIT_FOR_LOCATOR group -->\n              <span *ngIf=\"subStep.remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\" style=\"display: inline;\">({{ subStep.remainingSeconds }}s remaining)</span>\n            </span>\n          </span>\n          <span  class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#6A7282] cqa-font-medium\" style=\"white-space: pre-line;\">\n            {{ formatDuration(subStep.duration || 0) }}\n          </span>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: AiLogsWithReasoningComponent, selector: "cqa-ai-logs-with-reasoning", inputs: ["status", "text", "description", "reasoning", "duration"] }, { type: i4$1.NgxTypedJsComponent, selector: "ngx-typed-js", inputs: ["cursorColor", "strings", "stringsElement", "typeSpeed", "startDelay", "backSpeed", "smartBackspace", "shuffle", "backDelay", "fadeOut", "fadeOutClass", "fadeOutDelay", "loop", "loopCount", "showCursor", "cursorChar", "autoInsertCss", "attr", "bindInputFocusEvents", "contentType"], outputs: ["completed", "preStringTyped", "stringTyped", "lastStringBackspaced", "typingPaused", "typingResumed", "reset", "stopped", "started", "destroyed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
@@ -18682,6 +19314,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
                     remainingSeconds: timeoutSeconds,
                     status: 'running'
                 };
+                this.addDurationToWaitLocatorGroupEntry(subStep);
                 this.processedSubSteps.push(this.waitLocatorGroupEntry);
                 this.countdownIntervalId = setInterval(() => {
                     if (this.waitLocatorGroupEntry) {
@@ -18708,6 +19341,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
                     const newText = subStep.description || subStep.text || subStep.title;
                     if (newText)
                         this.waitLocatorGroupEntry.description = newText;
+                    this.addDurationToWaitLocatorGroupEntry(subStep);
                 }
                 else {
                     this.processedSubSteps.push({ ...subStep });
@@ -18728,6 +19362,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
                         if (newText)
                             this.waitLocatorGroupEntry.description = newText;
                         this.waitLocatorGroupEntry.status = 'success';
+                        this.addDurationToWaitLocatorGroupEntry(subStep);
                         this.waitLocatorGroupEntry.remainingSeconds = null;
                         this.clearCountdownTimer();
                         this.waitLocatorGroupEntry = null;
@@ -18821,6 +19456,33 @@ class DbVerificationStepComponent extends BaseStepComponent {
             this.countdownIntervalId = null;
         }
     }
+    addDurationToWaitLocatorGroupEntry(subStep) {
+        if (!this.waitLocatorGroupEntry) {
+            return;
+        }
+        const rawDuration = subStep?.duration;
+        let delta = 0;
+        if (typeof rawDuration === 'number') {
+            delta = rawDuration;
+        }
+        else if (typeof rawDuration === 'string' && rawDuration.trim() !== '') {
+            const parsed = parseFloat(rawDuration);
+            delta = Number.isFinite(parsed) ? parsed : 0;
+        }
+        if (delta <= 0) {
+            return;
+        }
+        const currentRaw = this.waitLocatorGroupEntry.duration;
+        let current = 0;
+        if (typeof currentRaw === 'number') {
+            current = currentRaw;
+        }
+        else if (typeof currentRaw === 'string' && currentRaw.trim() !== '') {
+            const parsedCurrent = parseFloat(currentRaw);
+            current = Number.isFinite(parsedCurrent) ? parsedCurrent : 0;
+        }
+        this.waitLocatorGroupEntry.duration = current + delta;
+    }
     processSubStepsForRunResult() {
         const allSubSteps = (this.subSteps || []);
         this.processedSubStepsForRunResult = [];
@@ -19153,14 +19815,14 @@ class CustomEditStepService {
         return editStepRef;
     }
 }
-CustomEditStepService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+CustomEditStepService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 CustomEditStepService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 
 /** Sentinel returned from afterClosed() when user clicked "Edit in depth". */
 const ELEMENT_POPUP_EDIT_IN_DEPTH = Symbol('ElementPopupEditInDepth');
@@ -19951,14 +20613,14 @@ class ElementPopupService {
         return editStepRef;
     }
 }
-ElementPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+ElementPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 ElementPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 
 class TestDataModalRef {
     constructor(overlayRef) {
@@ -20407,14 +21069,14 @@ class TestDataModalService {
         return modalRef;
     }
 }
-TestDataModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+TestDataModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 TestDataModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 
 class TestCaseNormalStepComponent {
     constructor(customEditStep, elementPopup, testDataModal, cdr, ngZone, sanitizer) {
@@ -23961,12 +24623,12 @@ class TestCaseApiStepComponent {
     }
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
-TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [{ token: i1$5.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
+TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [{ token: i1$6.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
 TestCaseApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseApiStepComponent, selector: "cqa-test-case-api-step", inputs: { config: "config", stepNumber: "stepNumber", method: "method", endpoint: "endpoint", description: "description", baseUrl: "baseUrl", headersCount: "headersCount", hasBody: "hasBody", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", expanded: "expanded", isReorder: "isReorder", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n      <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false) -->\n      <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <span title=\"API\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n          stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n          stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n        <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">\n          {{ expanded ? 'Hide Details' : 'View Details' }}\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n              fill=\"#3F43EE\" />\n          </svg>\n        </a>\n      </div>\n      <!-- Expanded details: light yellow box with method, URL, headers, body, save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div\n          class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n            <span>{{ baseUrl || 'https://api.example.com' }}</span>\n          </div>\n          <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span>Headers: {{ headersCount ?? 0 }}</span>\n            <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n            <span>Save to: {{ saveTo || '\u2014' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n      <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false) -->\n      <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <span title=\"API\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n          stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n          stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n        <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">\n          {{ expanded ? 'Hide Details' : 'View Details' }}\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n              fill=\"#3F43EE\" />\n          </svg>\n        </a>\n      </div>\n      <!-- Expanded details: light yellow box with method, URL, headers, body, save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div\n          class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n            <span>{{ baseUrl || 'https://api.example.com' }}</span>\n          </div>\n          <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span>Headers: {{ headersCount ?? 0 }}</span>\n            <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n            <span>Save to: {{ saveTo || '\u2014' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      </div>\n    </div>\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1$5.OverlayContainer }]; }, propDecorators: { editModalBackdropRef: [{
+        }], ctorParameters: function () { return [{ type: i1$6.OverlayContainer }]; }, propDecorators: { editModalBackdropRef: [{
                 type: ViewChild,
                 args: ['editModalBackdrop']
             }], config: [{
@@ -35873,6 +36535,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ChartCardComponent,
         ProgressTextCardComponent,
         DashboardHeaderComponent,
+        WorkspaceSelectorComponent,
         CoverageModuleCardComponent,
         TestDistributionCardComponent,
         FailedTestCasesCardComponent,
@@ -36022,6 +36685,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ChartCardComponent,
         ProgressTextCardComponent,
         DashboardHeaderComponent,
+        WorkspaceSelectorComponent,
         CoverageModuleCardComponent,
         TestDistributionCardComponent,
         FailedTestCasesCardComponent,
@@ -36217,6 +36881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ChartCardComponent,
                         ProgressTextCardComponent,
                         DashboardHeaderComponent,
+                        WorkspaceSelectorComponent,
                         CoverageModuleCardComponent,
                         TestDistributionCardComponent,
                         FailedTestCasesCardComponent,
@@ -36372,6 +37037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ChartCardComponent,
                         ProgressTextCardComponent,
                         DashboardHeaderComponent,
+                        WorkspaceSelectorComponent,
                         CoverageModuleCardComponent,
                         TestDistributionCardComponent,
                         FailedTestCasesCardComponent,
@@ -36641,14 +37307,14 @@ class DialogService {
         });
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 
 /**
  * Opens the Step Details Drawer (Edit In Depth) as a right-side drawer overlay.
@@ -36706,12 +37372,12 @@ class StepDetailsDrawerService {
         return drawerRef;
     }
 }
-StepDetailsDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+StepDetailsDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 StepDetailsDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 
 /**
  * Configuration for Step Details Drawer (Edit In Depth).
@@ -37043,14 +37709,14 @@ class StepDetailsModalService {
         return modalRef;
     }
 }
-StepDetailsModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsModalService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+StepDetailsModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsModalService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 StepDetailsModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsModalService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 
 const moment = momentImport.default || momentImport;
 /** Default status value -> dot color. Override via BuildTestCaseDetailsOptions. */
@@ -37244,5 +37910,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map