@cqa-lib/cqa-ui 1.1.220 → 1.1.222

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Inject, Optional, Injector, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormGroup, Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -5512,6 +5512,277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class CustomInputComponent {
+    constructor() {
+        this.label = '';
+        this.type = 'text';
+        this.placeholder = '';
+        this.value = '';
+        this.disabled = false;
+        this.errors = [];
+        this.required = false;
+        this.ariaLabel = '';
+        this.size = 'md';
+        this.fullWidth = false;
+        this.showCharCount = false;
+        this.valueChange = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this.focused = new EventEmitter();
+        this.enterPressed = new EventEmitter();
+        this.inputValue = '';
+        this.isFocused = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue !== undefined) {
+            let newValue = changes['value'].currentValue ?? '';
+            if (this.maxLength && newValue.length > this.maxLength) {
+                newValue = newValue.substring(0, this.maxLength);
+            }
+            if (newValue !== this.inputValue) {
+                this.inputValue = newValue;
+            }
+        }
+    }
+    get hasError() {
+        return this.errors && this.errors.length > 0;
+    }
+    get inputSizeClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'cqa-px-3 cqa-py-2 cqa-text-xs';
+            case 'md':
+                return 'cqa-px-4 cqa-py-2.5 cqa-text-sm';
+            case 'lg':
+                return 'cqa-px-5 cqa-py-3 cqa-text-base';
+            default:
+                return 'cqa-px-4 cqa-py-2.5 cqa-text-sm';
+        }
+    }
+    get labelSizeClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'cqa-text-xs cqa-mb-1';
+            case 'md':
+                return 'cqa-text-sm cqa-mb-1.5';
+            case 'lg':
+                return 'cqa-text-base cqa-mb-2';
+            default:
+                return 'cqa-text-sm cqa-mb-1.5';
+        }
+    }
+    onInput(event) {
+        const target = event.target;
+        let nextValue = target?.value ?? '';
+        if (this.showCharCount && this.maxLength && nextValue.length > this.maxLength) {
+            nextValue = nextValue.substring(0, this.maxLength);
+            if (target) {
+                target.value = nextValue;
+            }
+        }
+        this.inputValue = nextValue;
+        this.valueChange.emit(this.inputValue);
+    }
+    onFocus(event) {
+        this.isFocused = true;
+        this.focused.emit(event);
+    }
+    onBlur(event) {
+        this.isFocused = false;
+        this.blurred.emit(event);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.enterPressed.emit(this.inputValue.trim());
+        }
+    }
+    get inputStyles() {
+        return this.inputInlineStyle || '';
+    }
+    get labelStyles() {
+        return this.labelInlineStyle || '';
+    }
+}
+CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomInputComponent, selector: "cqa-custom-input", inputs: { label: "label", type: "type", placeholder: "placeholder", value: "value", disabled: "disabled", errors: "errors", required: "required", ariaLabel: "ariaLabel", size: "size", fullWidth: "fullWidth", maxLength: "maxLength", showCharCount: "showCharCount", inputInlineStyle: "inputInlineStyle", labelInlineStyle: "labelInlineStyle" }, outputs: { valueChange: "valueChange", blurred: "blurred", focused: "focused", enterPressed: "enterPressed" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n    <label \n      *ngIf=\"label\"\n      class=\"cqa-font-medium cqa-text-[#374151]\"\n      [ngClass]=\"labelSizeClasses\"\n      [style]=\"labelStyles\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n    </label>\n\n    <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n      <input\n        [type]=\"type\"\n        class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none {{ inputSizeClasses }}\"\n        [ngClass]=\"{\n          'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n          'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n          'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n          'cqa-outline-none': true\n        }\"\n        [style]=\"inputStyles\"\n        [placeholder]=\"placeholder\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel || label\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-required]=\"required\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n      <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n        {{ inputValue.length }}/{{ maxLength }}\n      </span>\n    </div>\n\n    <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n      <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n        <svg \n          xmlns=\"http://www.w3.org/2000/svg\" \n          width=\"14\" \n          height=\"14\" \n          viewBox=\"0 0 14 14\" \n          fill=\"none\"\n          class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n          <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n        </svg>\n        <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n          {{ error }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-custom-input', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n    <label \n      *ngIf=\"label\"\n      class=\"cqa-font-medium cqa-text-[#374151]\"\n      [ngClass]=\"labelSizeClasses\"\n      [style]=\"labelStyles\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n    </label>\n\n    <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n      <input\n        [type]=\"type\"\n        class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none {{ inputSizeClasses }}\"\n        [ngClass]=\"{\n          'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n          'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n          'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n          'cqa-outline-none': true\n        }\"\n        [style]=\"inputStyles\"\n        [placeholder]=\"placeholder\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel || label\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-required]=\"required\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n      <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n        {{ inputValue.length }}/{{ maxLength }}\n      </span>\n    </div>\n\n    <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n      <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n        <svg \n          xmlns=\"http://www.w3.org/2000/svg\" \n          width=\"14\" \n          height=\"14\" \n          viewBox=\"0 0 14 14\" \n          fill=\"none\"\n          class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n          <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n        </svg>\n        <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n          {{ error }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], showCharCount: [{
+                type: Input
+            }], inputInlineStyle: [{
+                type: Input
+            }], labelInlineStyle: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }], focused: [{
+                type: Output
+            }], enterPressed: [{
+                type: Output
+            }] } });
+
+class ExportCodeModalComponent {
+    constructor(modalData, dialogRef) {
+        this.modalData = modalData;
+        this.dialogRef = dialogRef;
+        this.isOpen = false;
+        this.cases = [];
+        this.disabled = false;
+        this.closeModal = new EventEmitter();
+        this.export = new EventEmitter();
+        this.exportOnLocal = true;
+        this.emailList = [];
+        this.showEmailError = false;
+        this.isDialogMode = false;
+        // Initialize email input control with validation
+        this.emailInputControl = new FormControl('', [
+            Validators.email
+        ]);
+        // If used with MatDialog, initialize from modalData
+        if (modalData) {
+            this.isDialogMode = true;
+            this.cases = modalData.cases || [];
+            this.disabled = modalData.disabled || false;
+            this.isOpen = true;
+        }
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        if (target === currentTarget || target.classList.contains('modal-backdrop')) {
+            this.onClose();
+        }
+    }
+    onClose() {
+        if (this.isDialogMode && this.dialogRef) {
+            this.dialogRef.close();
+        }
+        else {
+            this.closeModal.emit();
+        }
+        // Reset form when closing
+        this.exportOnLocal = true;
+        this.emailList = [];
+        this.emailInputControl.reset();
+        this.showEmailError = false;
+    }
+    addEmail() {
+        const email = this.emailInputControl.value?.trim();
+        if (!email) {
+            this.emailInputControl.setErrors({ required: true });
+            this.emailInputControl.markAsTouched();
+            return;
+        }
+        if (this.emailInputControl.invalid) {
+            this.emailInputControl.markAsTouched();
+            return;
+        }
+        // Check for duplicates
+        if (this.emailList.includes(email)) {
+            this.emailInputControl.setErrors({ duplicate: true });
+            this.emailInputControl.markAsTouched();
+            return;
+        }
+        // Add email to list
+        this.emailList.push(email);
+        this.emailInputControl.reset();
+        this.showEmailError = false;
+    }
+    removeEmail(index) {
+        if (index >= 0 && index < this.emailList.length) {
+            this.emailList.splice(index, 1);
+        }
+    }
+    getEmailErrors() {
+        if (!this.emailInputControl.touched || !this.emailInputControl.invalid) {
+            return [];
+        }
+        const errors = [];
+        if (this.emailInputControl.errors?.['required']) {
+            errors.push('Email is required');
+        }
+        if (this.emailInputControl.errors?.['email']) {
+            errors.push('Please enter a valid email address');
+        }
+        if (this.emailInputControl.errors?.['duplicate']) {
+            errors.push('This email address has already been added');
+        }
+        return errors;
+    }
+    isExportDisabled() {
+        if (this.exportOnLocal) {
+            return false;
+        }
+        // For email export, at least one valid email is required
+        return this.emailList.length === 0;
+    }
+    handleExport() {
+        if (!this.exportOnLocal && this.emailList.length === 0) {
+            this.showEmailError = true;
+            return;
+        }
+        // Emit export event with appropriate data
+        const result = this.exportOnLocal ? { type: 'local' } : {
+            type: 'email',
+            emails: this.emailList
+        };
+        if (this.isDialogMode && this.dialogRef) {
+            this.dialogRef.close(result);
+        }
+        else {
+            this.export.emit(result);
+        }
+    }
+}
+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.ɵ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\">(ID: {{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,
+            args: [{ selector: 'cqa-export-code-modal', 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\">(ID: {{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", styles: [] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$4.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { isOpen: [{
+                type: Input
+            }], cases: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
+            }], export: [{
+                type: Output
+            }] } });
+
 class TableTemplateComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -5520,8 +5791,11 @@ class TableTemplateComponent {
         this.searchValue = '';
         this.showClear = true;
         this.showSearchBar = true;
+        this.showExportButton = false;
+        this.isExporting = false;
         // Search bar outputs
         this.onSearchChange = new EventEmitter();
+        this.onExportClick = new EventEmitter();
         // Filter outputs
         this.onApplyFilterClick = new EventEmitter();
         this.onResetFilterClick = new EventEmitter();
@@ -5622,6 +5896,8 @@ class TableTemplateComponent {
         this.computedColumns = [];
         // Auto-generated visibility columns from columns input
         this.visibilityColumns = [];
+        // Export modal state
+        this.isExportModalOpen = false;
     }
     updateComputedColumns() {
         const visibility = this._columnVisibility || {};
@@ -5896,12 +6172,40 @@ class TableTemplateComponent {
     trackBySelectDropdownTemplateRef(index) {
         return index;
     }
+    exportCodeClick() {
+        // Get selected items
+        const selectedItems = this.currentSelectedItems;
+        if (selectedItems.length === 0) {
+            // Emit event to parent to handle the case when no items are selected
+            this.onExportClick.emit();
+            return;
+        }
+        this.isExportModalOpen = true;
+    }
+    closeExportModal() {
+        this.isExportModalOpen = false;
+    }
+    onExportModalExport(result) {
+        this.isExportModalOpen = false;
+        // Emit event to parent with export result
+        this.onExportClick.emit({
+            type: result.type,
+            emails: result.emails,
+            selectedItems: this.currentSelectedItems
+        });
+    }
+    get selectedCasesForExport() {
+        return this.currentSelectedItems.map(item => ({
+            id: item.id,
+            name: item.name || item.title || 'Unnamed'
+        }));
+    }
 }
 TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", serverSidePagination: "serverSidePagination", totalElements: "totalElements", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", pageChange: "pageChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\"\n          [cellJsonPathGetter]=\"cellJsonPathGetter\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["sortChange"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", serverSidePagination: "serverSidePagination", totalElements: "totalElements", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", pageChange: "pageChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\"\n          [cellJsonPathGetter]=\"cellJsonPathGetter\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["sortChange"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\"\n          [cellJsonPathGetter]=\"cellJsonPathGetter\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\"\n          [cellJsonPathGetter]=\"cellJsonPathGetter\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPlaceholder: [{
                 type: Input
             }], searchValue: [{
@@ -5910,8 +6214,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], showSearchBar: [{
                 type: Input
+            }], showExportButton: [{
+                type: Input
+            }], isExporting: [{
+                type: Input
             }], onSearchChange: [{
                 type: Output
+            }], onExportClick: [{
+                type: Output
             }], onApplyFilterClick: [{
                 type: Output
             }], onResetFilterClick: [{
@@ -12332,6 +12642,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class JumpToStepModalComponent {
+    constructor() {
+        /** Whether the modal is open */
+        this.isOpen = false;
+        /** Modal title */
+        this.title = 'Jump to Step';
+        /** List of step items to display */
+        this.items = [];
+        /** Search placeholder text */
+        this.searchPlaceholder = 'Search steps by name or number...';
+        /** Search Empty State text */
+        this.searchEmptyStateLabel = 'No steps found';
+        /** Current search value */
+        this.searchValue = '';
+        /** Whether search is enabled */
+        this.enableSearch = true;
+        /** Filtered items based on search */
+        this.filteredItems = [];
+        /** Emitted when modal should be closed */
+        this.onClose = new EventEmitter();
+        /** Emitted when search value changes */
+        this.onSearch = new EventEmitter();
+        /** Emitted when a step item is selected */
+        this.onSelect = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] || changes['searchValue']) {
+            this.updateFilteredItems();
+        }
+    }
+    updateFilteredItems() {
+        if (!this.items || this.items.length === 0) {
+            this.filteredItems = [];
+            return;
+        }
+        if (!this.searchValue || this.searchValue.trim() === '') {
+            this.filteredItems = [...this.items];
+            return;
+        }
+        const searchTerm = this.searchValue.toLowerCase().trim();
+        this.filteredItems = this.items.filter(item => {
+            const stepNumberMatch = String(item.stepNumber).toLowerCase().includes(searchTerm);
+            const descriptionMatch = item.description.toLowerCase().includes(searchTerm);
+            return stepNumberMatch || descriptionMatch;
+        });
+    }
+    onSearchValueChange(value) {
+        this.searchValue = value;
+        this.updateFilteredItems();
+        this.onSearch.emit(value);
+    }
+    onItemClick(item) {
+        this.onSelect.emit(item);
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        if (target === currentTarget || target.classList.contains('modal-backdrop')) {
+            this.handleClose();
+        }
+    }
+    handleClose() {
+        this.onClose.emit();
+    }
+    getStatusBadgeClasses(status) {
+        const baseClasses = 'cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-3';
+        switch (status) {
+            case 'passed':
+                return `${baseClasses} cqa-bg-green-100 cqa-text-green-800`;
+            case 'current':
+                return `${baseClasses} cqa-bg-blue-100 cqa-text-blue-800`;
+            case 'pending':
+                return `${baseClasses} cqa-bg-gray-100 cqa-text-gray-800`;
+            case 'failed':
+                return `${baseClasses} cqa-bg-red-100 cqa-text-red-800`;
+            case 'running':
+                return `${baseClasses} cqa-bg-blue-100 cqa-text-blue-800`;
+            case 'skipped':
+                return `${baseClasses} cqa-bg-gray-100 cqa-text-gray-800`;
+            default:
+                return `${baseClasses} cqa-bg-gray-100 cqa-text-gray-800`;
+        }
+    }
+    get hasItems() {
+        return this.filteredItems && this.filteredItems.length > 0;
+    }
+    get itemsCount() {
+        return this.filteredItems ? this.filteredItems.length : 0;
+    }
+    /** Convert stepNumber to string for the badge label (String() is not available in templates) */
+    toLabel(value) {
+        return '' + value;
+    }
+    trackByItemId(index, item) {
+        return item.id;
+    }
+}
+JumpToStepModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+JumpToStepModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: JumpToStepModalComponent, selector: "cqa-jump-to-step-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", searchPlaceholder: "searchPlaceholder", searchEmptyStateLabel: "searchEmptyStateLabel", searchValue: "searchValue", enableSearch: "enableSearch" }, outputs: { onClose: "onClose", onSearch: "onSearch", onSelect: "onSelect" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg  cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n      <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n        {{ title }}\n      </h2>\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close modal\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n      </button>\n    </div>\n\n\n    <!-- Search Bar -->\n    <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n      <cqa-search-bar\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"onSearchValueChange($event)\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Divider below search -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Steps List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n         {{searchEmptyStateLabel || 'No Data found.'}}\n        </p>\n      </div>\n\n      <!-- Steps List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col\">\n        <button\n          *ngFor=\"let item of filteredItems; trackBy: trackByItemId\"\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n          (click)=\"onItemClick(item)\">\n\n          <!-- Step Number Badge -->\n          <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n            style=\"min-width: 32px;\">\n            {{ item.stepNumber }}\n          </span>\n\n          <!-- Step Description -->\n          <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">\n            {{ item.description }}\n          </span>\n\n          <!-- Status Badge -->\n          <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">\n            {{ item.status }}\n          </span>\n\n          <!-- Right Arrow Icon-->\n          <!-- <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 4L10 8L6 12\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span> -->\n        </button>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-5 cqa-pt-3\">\n      <p class=\"cqa-text-xs cqa-text-[#6B7280] cqa-font-inter cqa-font-normal\">\n        {{ itemsCount }} {{ itemsCount === 1 ? 'step' : 'steps' }} found\n      </p>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-jump-to-step-modal', host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg  cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n      <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n        {{ title }}\n      </h2>\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close modal\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n      </button>\n    </div>\n\n\n    <!-- Search Bar -->\n    <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n      <cqa-search-bar\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"onSearchValueChange($event)\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Divider below search -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Steps List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n         {{searchEmptyStateLabel || 'No Data found.'}}\n        </p>\n      </div>\n\n      <!-- Steps List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col\">\n        <button\n          *ngFor=\"let item of filteredItems; trackBy: trackByItemId\"\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n          (click)=\"onItemClick(item)\">\n\n          <!-- Step Number Badge -->\n          <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n            style=\"min-width: 32px;\">\n            {{ item.stepNumber }}\n          </span>\n\n          <!-- Step Description -->\n          <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">\n            {{ item.description }}\n          </span>\n\n          <!-- Status Badge -->\n          <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">\n            {{ item.status }}\n          </span>\n\n          <!-- Right Arrow Icon-->\n          <!-- <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 4L10 8L6 12\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span> -->\n        </button>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-5 cqa-pt-3\">\n      <p class=\"cqa-text-xs cqa-text-[#6B7280] cqa-font-inter cqa-font-normal\">\n        {{ itemsCount }} {{ itemsCount === 1 ? 'step' : 'steps' }} found\n      </p>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], searchEmptyStateLabel: [{
+                type: Input
+            }], searchValue: [{
+                type: Input
+            }], enableSearch: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }] } });
+
+class BreakpointsModalComponent {
+    constructor() {
+        /** Whether the modal is open */
+        this.isOpen = false;
+        /** Modal title */
+        this.title = 'Breakpoints';
+        /** List of breakpoint items to display */
+        this.items = [];
+        /** Label for the remove-all button */
+        this.buttonLabel = 'Remove all breakpoints';
+        /** Label for the empty state */
+        this.emptyStateLabel = 'No breakpoints set.';
+        /** Internal copy so items can be removed locally when parent doesn't re-bind */
+        this.displayItems = [];
+        /** Emitted when modal should be closed */
+        this.onClose = new EventEmitter();
+        /** Emitted when a single breakpoint should be removed */
+        this.onRemove = new EventEmitter();
+        /** Emitted when all breakpoints should be removed */
+        this.onRemoveAll = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.displayItems = [...(this.items || [])];
+        }
+    }
+    get summaryText() {
+        const count = this.displayItems.length;
+        if (count === 0)
+            return '';
+        return count === 1 ? '1 breakpoint set' : `${count} breakpoints set`;
+    }
+    get hasItems() {
+        return this.displayItems && this.displayItems.length > 0;
+    }
+    removeItem(item) {
+        this.onRemove.emit(item);
+        this.displayItems = this.displayItems.filter(b => b.stepId !== item.stepId);
+        if (this.displayItems.length === 0) {
+            this.handleClose();
+        }
+    }
+    removeAll() {
+        this.onRemoveAll.emit();
+        this.displayItems = [];
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        if (target === currentTarget || target.classList.contains('modal-backdrop')) {
+            this.handleClose();
+        }
+    }
+    handleClose() {
+        this.onClose.emit();
+    }
+    trackByItemId(index, item) {
+        return item.id;
+    }
+}
+BreakpointsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreakpointsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreakpointsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BreakpointsModalComponent, selector: "cqa-breakpoints-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", buttonLabel: "buttonLabel", emptyStateLabel: "emptyStateLabel" }, outputs: { onClose: "onClose", onRemove: "onRemove", onRemoveAll: "onRemoveAll" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-px-6 cqa-pt-6 cqa-pb-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n        <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base cqa-font-inter\">\n          {{ title }}\n        </h2>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\n          (click)=\"handleClose()\"\n          aria-label=\"Close modal\">\n          <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Summary text -->\n      <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal  cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n        {{ summaryText }}\n      </p>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n          {{ emptyStateLabel || 'No Data Found.' }}\n        </p>\n      </div>\n\n      <!-- Breakpoints List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n        <div\n          *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n          class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n          <!-- Red Breakpoint Dot -->\n          <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n          <!-- Text Content -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n              {{ item.primaryLabel }}\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n              {{ item.secondaryLabel }}\n            </span>\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n              [tooltip]=\"'Remove breakpoint'\"\n              (clicked)=\"removeItem(item)\">\n              <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n              </svg>\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer: Remove All Button -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n      \n      <cqa-button\n        [fullWidth]=\"true\"\n        (click)=\"removeAll()\"\n        [label]=\"buttonLabel\"\n        variant=\"outlined\"\n        color=\"black\"\n        [text]=\"buttonLabel\"\n        >\n      </cqa-button>\n      <!-- <button\n        type=\"button\"\n        class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n        (click)=\"removeAll()\">\n        {{ buttonLabel }}\n      </button> -->\n    </div>\n  </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], 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: BreakpointsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-breakpoints-modal', host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-px-6 cqa-pt-6 cqa-pb-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n        <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base cqa-font-inter\">\n          {{ title }}\n        </h2>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\n          (click)=\"handleClose()\"\n          aria-label=\"Close modal\">\n          <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Summary text -->\n      <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal  cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n        {{ summaryText }}\n      </p>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n          {{ emptyStateLabel || 'No Data Found.' }}\n        </p>\n      </div>\n\n      <!-- Breakpoints List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n        <div\n          *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n          class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n          <!-- Red Breakpoint Dot -->\n          <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n          <!-- Text Content -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n              {{ item.primaryLabel }}\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n              {{ item.secondaryLabel }}\n            </span>\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n              [tooltip]=\"'Remove breakpoint'\"\n              (clicked)=\"removeItem(item)\">\n              <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n              </svg>\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer: Remove All Button -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n      \n      <cqa-button\n        [fullWidth]=\"true\"\n        (click)=\"removeAll()\"\n        [label]=\"buttonLabel\"\n        variant=\"outlined\"\n        color=\"black\"\n        [text]=\"buttonLabel\"\n        >\n      </cqa-button>\n      <!-- <button\n        type=\"button\"\n        class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n        (click)=\"removeAll()\">\n        {{ buttonLabel }}\n      </button> -->\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], emptyStateLabel: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onRemove: [{
+                type: Output
+            }], onRemoveAll: [{
+                type: Output
+            }] } });
+
 class MainStepCollapseComponent {
     constructor() {
         this.title = 'Prerequisites';
@@ -15079,7 +15596,7 @@ class CompareRunsComponent {
     }
 }
 CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
@@ -15271,7 +15788,7 @@ class IterationsLoopComponent {
     }
 }
 IterationsLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-bg-white\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"iterations\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isTableDataLoading\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n    <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n      <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n      <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-bg-white\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"iterations\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isTableDataLoading\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n    <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n      <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n      <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-iterations-loop', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-bg-white\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"iterations\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isTableDataLoading\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n    <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n      <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n      <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
@@ -15326,140 +15843,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
-class CustomInputComponent {
-    constructor() {
-        this.label = '';
-        this.type = 'text';
-        this.placeholder = '';
-        this.value = '';
-        this.disabled = false;
-        this.errors = [];
-        this.required = false;
-        this.ariaLabel = '';
-        this.size = 'md';
-        this.fullWidth = false;
-        this.showCharCount = false;
-        this.valueChange = new EventEmitter();
-        this.blurred = new EventEmitter();
-        this.focused = new EventEmitter();
-        this.enterPressed = new EventEmitter();
-        this.inputValue = '';
-        this.isFocused = false;
-    }
-    ngOnChanges(changes) {
-        if (changes['value'] && changes['value'].currentValue !== undefined) {
-            let newValue = changes['value'].currentValue ?? '';
-            if (this.maxLength && newValue.length > this.maxLength) {
-                newValue = newValue.substring(0, this.maxLength);
-            }
-            if (newValue !== this.inputValue) {
-                this.inputValue = newValue;
-            }
-        }
-    }
-    get hasError() {
-        return this.errors && this.errors.length > 0;
-    }
-    get inputSizeClasses() {
-        switch (this.size) {
-            case 'sm':
-                return 'cqa-px-3 cqa-py-2 cqa-text-xs';
-            case 'md':
-                return 'cqa-px-4 cqa-py-2.5 cqa-text-sm';
-            case 'lg':
-                return 'cqa-px-5 cqa-py-3 cqa-text-base';
-            default:
-                return 'cqa-px-4 cqa-py-2.5 cqa-text-sm';
-        }
-    }
-    get labelSizeClasses() {
-        switch (this.size) {
-            case 'sm':
-                return 'cqa-text-xs cqa-mb-1';
-            case 'md':
-                return 'cqa-text-sm cqa-mb-1.5';
-            case 'lg':
-                return 'cqa-text-base cqa-mb-2';
-            default:
-                return 'cqa-text-sm cqa-mb-1.5';
-        }
-    }
-    onInput(event) {
-        const target = event.target;
-        let nextValue = target?.value ?? '';
-        if (this.showCharCount && this.maxLength && nextValue.length > this.maxLength) {
-            nextValue = nextValue.substring(0, this.maxLength);
-            if (target) {
-                target.value = nextValue;
-            }
-        }
-        this.inputValue = nextValue;
-        this.valueChange.emit(this.inputValue);
-    }
-    onFocus(event) {
-        this.isFocused = true;
-        this.focused.emit(event);
-    }
-    onBlur(event) {
-        this.isFocused = false;
-        this.blurred.emit(event);
-    }
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            this.enterPressed.emit(this.inputValue.trim());
-        }
-    }
-    get inputStyles() {
-        return this.inputInlineStyle || '';
-    }
-    get labelStyles() {
-        return this.labelInlineStyle || '';
-    }
-}
-CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomInputComponent, selector: "cqa-custom-input", inputs: { label: "label", type: "type", placeholder: "placeholder", value: "value", disabled: "disabled", errors: "errors", required: "required", ariaLabel: "ariaLabel", size: "size", fullWidth: "fullWidth", maxLength: "maxLength", showCharCount: "showCharCount", inputInlineStyle: "inputInlineStyle", labelInlineStyle: "labelInlineStyle" }, outputs: { valueChange: "valueChange", blurred: "blurred", focused: "focused", enterPressed: "enterPressed" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n    <label \n      *ngIf=\"label\"\n      class=\"cqa-font-medium cqa-text-[#374151]\"\n      [ngClass]=\"labelSizeClasses\"\n      [style]=\"labelStyles\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n    </label>\n\n    <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n      <input\n        [type]=\"type\"\n        class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none {{ inputSizeClasses }}\"\n        [ngClass]=\"{\n          'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n          'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n          'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n          'cqa-outline-none': true\n        }\"\n        [style]=\"inputStyles\"\n        [placeholder]=\"placeholder\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel || label\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-required]=\"required\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n      <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n        {{ inputValue.length }}/{{ maxLength }}\n      </span>\n    </div>\n\n    <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n      <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n        <svg \n          xmlns=\"http://www.w3.org/2000/svg\" \n          width=\"14\" \n          height=\"14\" \n          viewBox=\"0 0 14 14\" \n          fill=\"none\"\n          class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n          <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n        </svg>\n        <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n          {{ error }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cqa-custom-input', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n    <label \n      *ngIf=\"label\"\n      class=\"cqa-font-medium cqa-text-[#374151]\"\n      [ngClass]=\"labelSizeClasses\"\n      [style]=\"labelStyles\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n    </label>\n\n    <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n      <input\n        [type]=\"type\"\n        class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none {{ inputSizeClasses }}\"\n        [ngClass]=\"{\n          'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n          'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n          'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n          'cqa-outline-none': true\n        }\"\n        [style]=\"inputStyles\"\n        [placeholder]=\"placeholder\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel || label\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-required]=\"required\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n      <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n        {{ inputValue.length }}/{{ maxLength }}\n      </span>\n    </div>\n\n    <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n      <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n        <svg \n          xmlns=\"http://www.w3.org/2000/svg\" \n          width=\"14\" \n          height=\"14\" \n          viewBox=\"0 0 14 14\" \n          fill=\"none\"\n          class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n          <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n        </svg>\n        <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n          {{ error }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], showCharCount: [{
-                type: Input
-            }], inputInlineStyle: [{
-                type: Input
-            }], labelInlineStyle: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], blurred: [{
-                type: Output
-            }], focused: [{
-                type: Output
-            }], enterPressed: [{
-                type: Output
-            }] } });
-
 class CustomTextareaComponent {
     constructor() {
         this.label = '';
@@ -16327,7 +16710,7 @@ class DbQueryExecutionItemComponent {
     }
 }
 DbQueryExecutionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap  cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n        <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n        \n        <!-- Status Badge -->\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'passed'\"\n          label=\"Passed\"\n          backgroundColor=\"#DCFCE7\"\n          textColor=\"#22C55E\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          icon=\"check_circle\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'failed'\"\n          label=\"Failed\"\n          backgroundColor=\"#FEE2E2\"\n          textColor=\"#DC2626\"\n          icon=\"error\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          size=\"small\">\n        </cqa-badge>\n        \n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n          {{ formatDuration(queryResult?.duration) }}\n          <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n          <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <button\n        (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showQueryCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      <button\n        (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showResponseCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7  cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n        matTooltipPosition=\"above\"\n        class=\"cqa-transition-transform cqa-min-w-max\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQueryExpanded()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showQueryCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponseExpanded()\"\n          class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showResponseCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        [cellJsonPathGetter]=\"cellJsonPathGetter\"\n        [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap  cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n        <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n        \n        <!-- Status Badge -->\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'passed'\"\n          label=\"Passed\"\n          backgroundColor=\"#DCFCE7\"\n          textColor=\"#22C55E\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          icon=\"check_circle\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'failed'\"\n          label=\"Failed\"\n          backgroundColor=\"#FEE2E2\"\n          textColor=\"#DC2626\"\n          icon=\"error\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          size=\"small\">\n        </cqa-badge>\n        \n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n          {{ formatDuration(queryResult?.duration) }}\n          <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n          <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <button\n        (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showQueryCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      <button\n        (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showResponseCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7  cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n        matTooltipPosition=\"above\"\n        class=\"cqa-transition-transform cqa-min-w-max\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQueryExpanded()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showQueryCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponseExpanded()\"\n          class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showResponseCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        [cellJsonPathGetter]=\"cellJsonPathGetter\"\n        [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-db-query-execution-item', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap  cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n        <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n        \n        <!-- Status Badge -->\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'passed'\"\n          label=\"Passed\"\n          backgroundColor=\"#DCFCE7\"\n          textColor=\"#22C55E\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          icon=\"check_circle\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'failed'\"\n          label=\"Failed\"\n          backgroundColor=\"#FEE2E2\"\n          textColor=\"#DC2626\"\n          icon=\"error\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          size=\"small\">\n        </cqa-badge>\n        \n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n          {{ formatDuration(queryResult?.duration) }}\n          <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n          <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <button\n        (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showQueryCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      <button\n        (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showResponseCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7  cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n        matTooltipPosition=\"above\"\n        class=\"cqa-transition-transform cqa-min-w-max\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQueryExpanded()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showQueryCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponseExpanded()\"\n          class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showResponseCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        [cellJsonPathGetter]=\"cellJsonPathGetter\"\n        [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
@@ -16730,7 +17113,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
     }
 }
 DbVerificationStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\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    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg 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    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></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 class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\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-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [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 && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              \n              <!-- Copied Tooltip -->\n              <div \n                *ngIf=\"showEnvironmentCopied\" \n                class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n                style=\"animation: fadeInOut 0.2s ease-in-out;\">\n                Copied!\n              </div>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\n          [showSearchBar]=\"false\"\n          [showFilterButton]=\"false\"\n          [showSettingsButton]=\"false\"\n          [showAutoRefreshButton]=\"false\"\n          [showOtherButton]=\"false\"\n          [showFilterPanel]=\"false\"\n          [serverSidePagination]=\"false\"\n          (pageChange)=\"onPageChange($event)\">\n        </cqa-table-template>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName", "onJsonPathCopiedHandler"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\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    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg 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    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></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 class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\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-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [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 && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              \n              <!-- Copied Tooltip -->\n              <div \n                *ngIf=\"showEnvironmentCopied\" \n                class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n                style=\"animation: fadeInOut 0.2s ease-in-out;\">\n                Copied!\n              </div>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\n          [showSearchBar]=\"false\"\n          [showFilterButton]=\"false\"\n          [showSettingsButton]=\"false\"\n          [showAutoRefreshButton]=\"false\"\n          [showOtherButton]=\"false\"\n          [showFilterPanel]=\"false\"\n          [serverSidePagination]=\"false\"\n          (pageChange)=\"onPageChange($event)\">\n        </cqa-table-template>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName", "onJsonPathCopiedHandler"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-db-verification-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\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    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg 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    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></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 class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\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-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [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 && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              \n              <!-- Copied Tooltip -->\n              <div \n                *ngIf=\"showEnvironmentCopied\" \n                class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n                style=\"animation: fadeInOut 0.2s ease-in-out;\">\n                Copied!\n              </div>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\n          [showSearchBar]=\"false\"\n          [showFilterButton]=\"false\"\n          [showSettingsButton]=\"false\"\n          [showAutoRefreshButton]=\"false\"\n          [showOtherButton]=\"false\"\n          [showFilterPanel]=\"false\"\n          [serverSidePagination]=\"false\"\n          (pageChange)=\"onPageChange($event)\">\n        </cqa-table-template>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
@@ -28880,6 +29263,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         FileDownloadStepComponent,
         DocumentVerificationStepComponent,
         LiveExecutionStepComponent,
+        JumpToStepModalComponent,
+        BreakpointsModalComponent,
         MainStepCollapseComponent,
         VisualComparisonComponent,
         SimulatorComponent,
@@ -28900,6 +29285,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ExecutionResultModalComponent,
         SessionChangesModalComponent,
         ErrorModalComponent,
+        ExportCodeModalComponent,
         ProgressIndicatorComponent,
         StepProgressCardComponent,
         StepStatusCardComponent,
@@ -29019,6 +29405,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         FileDownloadStepComponent,
         DocumentVerificationStepComponent,
         LiveExecutionStepComponent,
+        JumpToStepModalComponent,
+        BreakpointsModalComponent,
         MainStepCollapseComponent,
         VisualComparisonComponent,
         SimulatorComponent,
@@ -29039,6 +29427,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ExecutionResultModalComponent,
         SessionChangesModalComponent,
         ErrorModalComponent,
+        ExportCodeModalComponent,
         ProgressIndicatorComponent,
         StepProgressCardComponent,
         StepStatusCardComponent,
@@ -29205,6 +29594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FileDownloadStepComponent,
                         DocumentVerificationStepComponent,
                         LiveExecutionStepComponent,
+                        JumpToStepModalComponent,
+                        BreakpointsModalComponent,
                         MainStepCollapseComponent,
                         VisualComparisonComponent,
                         SimulatorComponent,
@@ -29225,6 +29616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ExecutionResultModalComponent,
                         SessionChangesModalComponent,
                         ErrorModalComponent,
+                        ExportCodeModalComponent,
                         ProgressIndicatorComponent,
                         StepProgressCardComponent,
                         StepStatusCardComponent,
@@ -29350,6 +29742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FileDownloadStepComponent,
                         DocumentVerificationStepComponent,
                         LiveExecutionStepComponent,
+                        JumpToStepModalComponent,
+                        BreakpointsModalComponent,
                         MainStepCollapseComponent,
                         VisualComparisonComponent,
                         SimulatorComponent,
@@ -29370,6 +29764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ExecutionResultModalComponent,
                         SessionChangesModalComponent,
                         ErrorModalComponent,
+                        ExportCodeModalComponent,
                         ProgressIndicatorComponent,
                         StepProgressCardComponent,
                         StepStatusCardComponent,
@@ -30088,5 +30483,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, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, 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, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, 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, AiDebugAlertComponent, 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, 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, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, 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 };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map