@cqa-lib/cqa-ui 1.1.184 → 1.1.186

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

@@ -20,7 +20,7 @@ import * as i3$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i3$4 from '@angular/material/slide-toggle';
+import * as i5 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i2$3 from '@angular/material/progress-spinner';
@@ -11218,6 +11218,8 @@ class MainStepCollapseComponent {
         this.viewStepsAsRedirect = false;
         /** When redirecting, open link in new tab. Default true */
         this.viewStepsOpenInNewTab = true;
+        /** Optional initial item id to expand (e.g. first failed prerequisite). When set and present in items, that item is expanded on load. */
+        this.initialExpandedItemId = null;
         this.viewSteps = new EventEmitter();
         this.headerButtonClick = new EventEmitter();
         this.expandedChange = new EventEmitter();
@@ -11226,11 +11228,24 @@ class MainStepCollapseComponent {
     }
     ngOnInit() {
         this.isExpanded = this.expanded;
+        this.applyInitialExpandedItemId();
     }
     ngOnChanges(changes) {
         if (changes['expanded']) {
             this.isExpanded = this.expanded;
         }
+        if (changes['initialExpandedItemId'] || changes['items']) {
+            this.applyInitialExpandedItemId();
+        }
+    }
+    applyInitialExpandedItemId() {
+        if (this.initialExpandedItemId == null || !this.items?.length) {
+            return;
+        }
+        const match = this.items.find((item) => item.id == this.initialExpandedItemId);
+        if (match) {
+            this.expandedItemId = match.id;
+        }
     }
     toggle() {
         this.isExpanded = !this.isExpanded;
@@ -11282,7 +11297,7 @@ class MainStepCollapseComponent {
         this.viewSteps.emit(item);
     }
     isItemExpanded(itemId) {
-        return this.expandedItemId === itemId;
+        return this.expandedItemId == itemId;
     }
     getDisplayCount() {
         // If items is empty/undefined and count is provided, use count
@@ -11310,7 +11325,7 @@ class MainStepCollapseComponent {
     }
 }
 MainStepCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab" }, outputs: { viewSteps: "viewSteps", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.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"] }] });
+MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab", initialExpandedItemId: "initialExpandedItemId" }, outputs: { viewSteps: "viewSteps", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-main-step-collapse', host: { class: 'cqa-ui-root' }, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", styles: [] }]
@@ -11334,6 +11349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], viewStepsOpenInNewTab: [{
                 type: Input
+            }], initialExpandedItemId: [{
+                type: Input
             }], itemContentTpl: [{
                 type: ContentChild,
                 args: ['itemContent', { read: TemplateRef }]
@@ -11404,7 +11421,6 @@ class SimulatorComponent {
         this.speedControlClickOutsideHandler = null;
         this.preloadVideoElement = null;
         this.preloadAllVideoElement = null;
-        this.targetGlobalTimeDuringSwitch = null;
         this.traceViewerLoading = false;
         this.traceViewerError = false;
         this.isCorrectDeviceFrameAvailable = false;
@@ -11543,6 +11559,9 @@ class SimulatorComponent {
     get isPlayerSwitching() {
         return this.playerState === 'switching';
     }
+    get shouldApplySmallHeightClasses() {
+        return typeof window !== 'undefined' && window.innerHeight < 600 && this.platformType === 'browser' && this.isLive;
+    }
     get effectiveBrowserViewPort() {
         const defaultViewport = { width: 1280, height: 720 };
         if (!this.browserViewPort) {
@@ -11688,44 +11707,6 @@ class SimulatorComponent {
             return;
         this.enqueueOperation(() => this.seekToTimeInternal(milliseconds));
     }
-    /**
-     * Seek to a global time on the combined timeline (converts to segment + local time)
-     */
-    async seekToGlobalTime(globalTimeMs) {
-        const total = this.totalDuration;
-        if (total <= 0)
-            return;
-        const clampedGlobal = Math.max(0, Math.min(globalTimeMs, total));
-        const boundaries = this.segmentBoundaries;
-        let segmentIndex = 0;
-        let segmentStart = 0;
-        for (let i = 0; i < boundaries.length; i++) {
-            if (clampedGlobal < boundaries[i]) {
-                segmentIndex = i;
-                segmentStart = i === 0 ? 0 : boundaries[i - 1];
-                break;
-            }
-            segmentIndex = i;
-            segmentStart = i === 0 ? 0 : boundaries[i - 1];
-        }
-        if (boundaries.length > 0 && clampedGlobal >= boundaries[boundaries.length - 1]) {
-            segmentIndex = boundaries.length - 1;
-            segmentStart = segmentIndex === 0 ? 0 : boundaries[segmentIndex - 1];
-        }
-        const localTimeMs = clampedGlobal - segmentStart;
-        if (this.currentVideoIndex === segmentIndex) {
-            await this.seekToTimeInternal(localTimeMs);
-            // Update progress after seek in same segment
-            if (this.totalDuration > 0) {
-                this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / this.totalDuration) * 100));
-            }
-        }
-        else {
-            const cumulativeTimestamp = segmentStart + localTimeMs;
-            await this.switchToVideoAndSeekInternal(cumulativeTimestamp);
-            // Progress is already updated inside switchToVideoAndSeekInternal
-        }
-    }
     /**
      * Seek video internal implementation (no enqueue - called from queue)
      * This prevents pipeline read errors during rapid seek operations
@@ -11756,11 +11737,13 @@ class SimulatorComponent {
         this.lastSetDuration = milliseconds;
         // Wait briefly for seek to complete (prevents rapid seek issues)
         await new Promise(resolve => setTimeout(resolve, 50));
-        const total = this.totalDuration;
-        if (total > 0) {
-            this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / total) * 100));
+        // Per-video progress (0-100% of current video)
+        const durationMs = video.duration * 1000;
+        if (durationMs > 0) {
+            this.progress = Math.min(100, Math.max(0, (video.currentTime * 1000 / durationMs) * 100));
         }
-        this.videoTimeUpdate.emit(this.globalCurrentTime);
+        const segmentStart = this.currentVideoIndex === 0 ? 0 : (this.segmentBoundaries[this.currentVideoIndex - 1] ?? 0);
+        this.videoTimeUpdate.emit(segmentStart + video.currentTime * 1000);
         // Set to paused state (user must explicitly play)
         this.playerState = 'paused';
         console.log('[Simulator] seekToTimeInternal: seek complete', {
@@ -11854,91 +11837,6 @@ class SimulatorComponent {
             console.log('[Simulator] playVideoInternal: already playing, skipping');
             return;
         }
-        if (this.hasMultipleVideos && this.videoUrls) {
-            const total = this.totalDuration;
-            const currentGlobalTime = this.globalCurrentTime;
-            const isAtEnd = total > 0 && (this.progress >= 100 || currentGlobalTime >= total);
-            const isLastVideo = this.currentVideoIndex >= this.videoUrls.length - 1;
-            const isLastVideoAtEnd = isLastVideo && video.duration && video.currentTime >= video.duration - 0.1;
-            if (isAtEnd || isLastVideoAtEnd) {
-                console.log('[Simulator] playVideoInternal: all videos completed, resetting to first video', {
-                    progress: this.progress,
-                    currentGlobalTime,
-                    total,
-                    currentVideoIndex: this.currentVideoIndex,
-                    isAtEnd,
-                    isLastVideoAtEnd
-                });
-                // Reset to first video at 0 progress
-                this.currentVideoIndex = 0;
-                this.progress = 0;
-                this.targetGlobalTimeDuringSwitch = 0;
-                this.hitMarkers.clear();
-                // Switch to first video and seek to 0
-                await this.switchToVideoAndSeekInternal(0);
-                // Update video reference after switch
-                const videoAfterSwitch = this.vplayer?.nativeElement;
-                if (!videoAfterSwitch) {
-                    console.error('[Simulator] playVideoInternal: video element not found after switch');
-                    return;
-                }
-                // Continue with normal play logic below
-                // The video element reference has changed, so we'll use videoAfterSwitch
-                // But we need to wait for metadata again
-                if (videoAfterSwitch.readyState < HTMLMediaElement.HAVE_METADATA) {
-                    await new Promise((resolve, reject) => {
-                        const onLoadedMetadata = () => {
-                            videoAfterSwitch.removeEventListener('loadedmetadata', onLoadedMetadata);
-                            videoAfterSwitch.removeEventListener('error', onError);
-                            resolve();
-                        };
-                        const onError = () => {
-                            videoAfterSwitch.removeEventListener('loadedmetadata', onLoadedMetadata);
-                            videoAfterSwitch.removeEventListener('error', onError);
-                            reject(new Error('Failed to load video metadata'));
-                        };
-                        videoAfterSwitch.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
-                        videoAfterSwitch.addEventListener('error', onError, { once: true });
-                        setTimeout(() => {
-                            videoAfterSwitch.removeEventListener('loadedmetadata', onLoadedMetadata);
-                            videoAfterSwitch.removeEventListener('error', onError);
-                            if (videoAfterSwitch.readyState >= HTMLMediaElement.HAVE_METADATA) {
-                                resolve();
-                            }
-                            else {
-                                reject(new Error('Timeout waiting for metadata'));
-                            }
-                        }, 500);
-                    });
-                }
-                // Set state to loading
-                this.playerState = 'loading';
-                try {
-                    await videoAfterSwitch.play();
-                    this.playerState = 'playing';
-                    this.isPlaying = true;
-                    this.playPromise = null;
-                    this.videoPlay.emit();
-                    this.isVideoPlayingChange.emit(true);
-                    this.targetGlobalTimeDuringSwitch = null;
-                    console.log('[Simulator] playVideoInternal: restarted from first video');
-                    return;
-                }
-                catch (err) {
-                    this.playerState = 'error';
-                    this.isPlaying = false;
-                    this.playPromise = null;
-                    this.isVideoPlayingChange.emit(false);
-                    if (err.name === 'AbortError') {
-                        this.playerState = 'paused';
-                    }
-                    else {
-                        console.error('[Simulator] playVideoInternal: failed after reset', err);
-                    }
-                    return;
-                }
-            }
-        }
         console.log('[Simulator] playVideoInternal: starting', {
             playerState: this.playerState,
             currentTime: video.currentTime,
@@ -11960,17 +11858,6 @@ class SimulatorComponent {
                 };
                 video.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
                 video.addEventListener('error', onError, { once: true });
-                // Timeout fallback
-                setTimeout(() => {
-                    video.removeEventListener('loadedmetadata', onLoadedMetadata);
-                    video.removeEventListener('error', onError);
-                    if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
-                        resolve();
-                    }
-                    else {
-                        reject(new Error('Timeout waiting for metadata'));
-                    }
-                }, 500);
             });
         }
         // Clear hit markers if starting from beginning
@@ -12011,10 +11898,11 @@ class SimulatorComponent {
                 currentTime: video.currentTime,
                 playerState: this.playerState
             });
-            // Check early markers (non-blocking, doesn't need to be queued)
             setTimeout(() => {
-                if (this.isPlaying) {
-                    this.checkMarkerHit(this.globalCurrentTime);
+                if (this.isPlaying && this.vplayer?.nativeElement) {
+                    const v = this.vplayer.nativeElement;
+                    const segmentStart = this.currentVideoIndex === 0 ? 0 : (this.segmentBoundaries[this.currentVideoIndex - 1] ?? 0);
+                    this.checkMarkerHit(segmentStart + v.currentTime * 1000);
                 }
             }, 50);
         }
@@ -12121,38 +12009,95 @@ class SimulatorComponent {
         }
         return [];
     }
-    get globalCurrentTime() {
-        if (this.targetGlobalTimeDuringSwitch !== null && !this.isPlaying && this.playerState !== 'playing') {
-            return this.targetGlobalTimeDuringSwitch;
+    get currentVideoMarkers() {
+        let markersToProcess;
+        if (!this.hasMultipleVideos) {
+            markersToProcess = this.stepMarkers;
         }
-        const video = this.vplayer?.nativeElement;
-        if (!video?.duration || !isFinite(video.duration)) {
-            // Fallback to override if video not ready yet
-            if (this.targetGlobalTimeDuringSwitch !== null) {
-                return this.targetGlobalTimeDuringSwitch;
+        else {
+            const boundaries = this.getVideoDurationBoundaries();
+            if (boundaries.length === 0 || this.currentVideoIndex >= boundaries.length) {
+                markersToProcess = this.stepMarkers;
+            }
+            else {
+                const currentBoundary = boundaries[this.currentVideoIndex];
+                markersToProcess = this.stepMarkers
+                    .filter(marker => {
+                    return marker.cumulativeDuration >= currentBoundary.start &&
+                        marker.cumulativeDuration < currentBoundary.end;
+                })
+                    .map(marker => this.adjustChildStepsDuration(marker, currentBoundary.start, currentBoundary.start, currentBoundary.end));
             }
-            return 0;
         }
-        const segmentStart = this.currentVideoIndex === 0 ? 0 : (this.segmentBoundaries[this.currentVideoIndex - 1] ?? 0);
-        return segmentStart + video.currentTime * 1000;
+        return this.flattenMarkers(markersToProcess);
+    }
+    adjustChildStepsDuration(marker, adjustment, videoStart, videoEnd) {
+        const adjustedMarker = {
+            ...marker,
+            cumulativeDuration: marker.cumulativeDuration - adjustment
+        };
+        if (marker.childSteps && marker.childSteps.length > 0) {
+            adjustedMarker.childSteps = marker.childSteps
+                .filter(child => child.cumulativeDuration >= videoStart && child.cumulativeDuration < videoEnd)
+                .map(child => {
+                const adjustedChild = {
+                    ...child,
+                    cumulativeDuration: child.cumulativeDuration - adjustment
+                };
+                if (child.childSteps && child.childSteps.length > 0) {
+                    adjustedChild.childSteps = child.childSteps
+                        .filter(nestedChild => nestedChild.cumulativeDuration >= videoStart && nestedChild.cumulativeDuration < videoEnd)
+                        .map(nestedChild => this.adjustChildStepsDuration(nestedChild, adjustment, videoStart, videoEnd));
+                }
+                return adjustedChild;
+            });
+        }
+        return adjustedMarker;
     }
-    getActualGlobalTime() {
+    getStepLeftPosition(step) {
         const video = this.vplayer?.nativeElement;
-        if (!video?.duration || !isFinite(video.duration))
+        if (!video?.duration)
             return 0;
-        const segmentStart = this.currentVideoIndex === 0 ? 0 : (this.segmentBoundaries[this.currentVideoIndex - 1] ?? 0);
-        return segmentStart + video.currentTime * 1000;
+        const durationMs = video.duration * 1000;
+        return (step.cumulativeDuration / durationMs) * 100;
     }
-    /** Global step markers for rendering on the combined timeline */
-    get globalStepMarkers() {
-        const allMarkers = this.flattenMarkers(this.stepMarkers);
-        return allMarkers.map(m => ({
-            globalTime: m.cumulativeDuration,
-            result: m.result,
-            testStepId: m.testStepId,
-            title: m.title,
-            level: m.level
-        }));
+    getStepColor(step) {
+        return step.level === 1 ? '#000000' : '#6366F1';
+    }
+    getStepResultColor(step) {
+        return this.getGlobalMarkerResultColor(step.result);
+    }
+    getGlobalMarkerColor(level) {
+        return level === 1 ? '#000000' : '#FFA500';
+    }
+    getGlobalMarkerResultColor(result) {
+        switch (result) {
+            case 'SUCCESS':
+                return '#12B76A';
+            case 'FAILURE':
+                return '#B91C1C';
+            case 'ABORTED':
+                return '#F79009';
+            case 'SKIPPED':
+                return '#667085';
+            default:
+                return '#6366F1';
+        }
+    }
+    onMarkerClick(event, marker) {
+        event.stopPropagation();
+        event.preventDefault();
+        const video = this.vplayer?.nativeElement;
+        if (!video?.duration)
+            return;
+        const targetTimeMs = marker.cumulativeDuration;
+        this.enqueueOperation(async () => {
+            await this.seekToTimeInternal(targetTimeMs);
+            if (marker.testStepId != null) {
+                this.hitMarkers.add(marker.testStepId);
+                this.markerHit.emit(marker);
+            }
+        });
     }
     get currentVideoUrl() {
         if (Array.isArray(this.videoUrls) && this.videoUrls.length > 0) {
@@ -12190,36 +12135,34 @@ class SimulatorComponent {
         if (!this.hasMultipleVideos)
             return;
         if (this.currentVideoIndex > 0) {
-            this.currentVideoIndex -= 1;
-            this.resetVideoState();
+            this.enqueueOperation(() => this.switchToVideoAndResetInternal(this.currentVideoIndex - 1));
         }
     }
     nextVideo() {
         if (!this.hasMultipleVideos)
             return;
         if (this.videoUrls && this.currentVideoIndex < this.videoUrls.length - 1) {
-            this.currentVideoIndex += 1;
-            this.resetVideoState();
+            this.enqueueOperation(() => this.switchToVideoAndResetInternal(this.currentVideoIndex + 1));
         }
     }
     onTimelineClick(event) {
-        if (!this.timelineBar?.nativeElement)
+        if (!this.timelineBar?.nativeElement || !this.vplayer?.nativeElement)
+            return;
+        const video = this.vplayer.nativeElement;
+        if (!video.duration || !isFinite(video.duration))
             return;
         const rect = this.timelineBar.nativeElement.getBoundingClientRect();
         const clickX = event.clientX - rect.left;
         const percent = Math.max(0, Math.min(1, clickX / rect.width));
-        const total = this.totalDuration;
-        if (total <= 0)
-            return;
-        const globalTimeMs = percent * total;
+        const targetTimeMs = percent * video.duration * 1000;
         const shouldResumePlaying = this.isPlaying;
         console.log('[Simulator] onTimelineClick', {
             percent,
-            globalTimeMs,
+            targetTimeMs,
             shouldResumePlaying
         });
         this.enqueueOperation(async () => {
-            await this.seekToGlobalTime(globalTimeMs);
+            await this.seekToTimeInternal(targetTimeMs);
             if (shouldResumePlaying) {
                 await new Promise(resolve => setTimeout(resolve, 100));
                 await this.playVideoInternal();
@@ -12257,7 +12200,6 @@ class SimulatorComponent {
             return;
         this.dragging = false;
         this.removeDragListeners();
-        // CRITICAL: Capture the playing state BEFORE any async operations
         const shouldResumePlaying = this.wasPlayingBeforeDrag;
         console.log('[Simulator] stopDrag: drag ended', {
             progress: this.progress,
@@ -12265,19 +12207,15 @@ class SimulatorComponent {
             shouldResumePlaying: shouldResumePlaying,
             currentPlayerState: this.playerState
         });
-        const total = this.totalDuration;
-        if (total <= 0)
+        const video = this.vplayer?.nativeElement;
+        if (!video || !video.duration || !isFinite(video.duration))
             return;
-        const globalTimeMs = (this.progress / 100) * total;
-        // CRITICAL FIX: Queue both seek and resume play together
-        // This ensures seek completes before attempting to play
+        const targetTimeMs = (this.progress / 100) * video.duration * 1000;
         this.enqueueOperation(async () => {
-            // Perform seek (this will pause the video)
-            await this.seekToGlobalTime(globalTimeMs);
-            // If video was playing before drag, resume it
+            await this.seekToTimeInternal(targetTimeMs);
             if (shouldResumePlaying) {
                 console.log('[Simulator] stopDrag: resuming playback after seek', {
-                    globalTimeMs,
+                    targetTimeMs,
                     playerState: this.playerState
                 });
                 // Wait a bit longer to ensure seek is fully complete
@@ -12347,12 +12285,12 @@ class SimulatorComponent {
         this.playerState = 'paused';
         this.videoPause.emit();
         this.isVideoPlayingChange.emit(false);
-        // Seamlessly load and play next segment
+        // Switch to next video and reset to 0
         if (this.hasMultipleVideos && this.videoUrls && this.currentVideoIndex < this.videoUrls.length - 1) {
-            const nextIndex = this.currentVideoIndex + 1;
-            const segmentStart = nextIndex === 0 ? 0 : (this.segmentBoundaries[nextIndex - 1] ?? 0);
+            this.currentVideoIndex += 1;
             this.enqueueOperation(async () => {
-                await this.switchToVideoAndSeekInternal(segmentStart);
+                await this.resetVideoStateInternal();
+                await new Promise(resolve => setTimeout(resolve, 100));
                 if (this.vplayer?.nativeElement && this.currentVideoUrl) {
                     await this.playVideoInternal();
                 }
@@ -12376,24 +12314,15 @@ class SimulatorComponent {
                 lastUpdate = now;
                 const currentMs = video.currentTime * 1000;
                 if (!this.dragging && this.playerState !== 'switching') {
-                    const total = this.totalDuration;
-                    // Clear targetGlobalTimeDuringSwitch if we've reached the target position
-                    // When playing, be more aggressive about clearing to allow live updates
-                    if (this.targetGlobalTimeDuringSwitch !== null) {
-                        const currentGlobal = this.getActualGlobalTime();
-                        const tolerance = this.isPlaying ? 1000 : 500; // More tolerance when playing
-                        if (Math.abs(currentGlobal - this.targetGlobalTimeDuringSwitch) < tolerance) {
-                            this.targetGlobalTimeDuringSwitch = null;
-                        }
+                    // Per-video progress (0-100% of current video)
+                    const durationMs = video.duration * 1000;
+                    if (durationMs > 0) {
+                        this.progress = Math.min(100, Math.max(0, (currentMs / durationMs) * 100));
                     }
-                    // globalCurrentTime now handles override logic - use it directly
-                    if (total > 0) {
-                        this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / total) * 100));
-                    }
-                    this.videoTimeUpdate.emit(this.globalCurrentTime);
-                    // Check if current time hits any marker
-                    this.checkMarkerHit(this.globalCurrentTime);
-                    // Preload next segment when ~5-10 seconds from ending
+                    // Emit cumulative time for parent (step highlighting)
+                    const segmentStart = this.currentVideoIndex === 0 ? 0 : (this.segmentBoundaries[this.currentVideoIndex - 1] ?? 0);
+                    this.videoTimeUpdate.emit(segmentStart + currentMs);
+                    this.checkMarkerHit(segmentStart + currentMs);
                     this.maybePreloadNextSegment();
                 }
             };
@@ -12596,48 +12525,10 @@ class SimulatorComponent {
                 // Mark as hit and emit event
                 this.hitMarkers.add(marker.testStepId);
                 this.markerHit.emit(marker);
-                console.log('[Simulator] Marker hit detected', {
-                    testStepId: marker.testStepId,
-                    cumulativeDuration: marker.cumulativeDuration,
-                    currentTime: globalTimeMs,
-                    timeDifference,
-                    title: marker.title,
-                    level: marker.level
-                });
                 break; // Only emit one marker per check
             }
         }
     }
-    getGlobalMarkerResultColor(result) {
-        switch (result) {
-            case 'SUCCESS':
-                return '#12B76A';
-            case 'FAILURE':
-                return '#B91C1C';
-            case 'ABORTED':
-                return '#F79009';
-            case 'SKIPPED':
-                return '#667085';
-            default:
-                return '#6366F1';
-        }
-    }
-    getGlobalMarkerColor(level) {
-        return level === 1 ? '#000000' : '#FFA500';
-    }
-    onMarkerClick(event, marker) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.enqueueOperation(async () => {
-            await this.seekToGlobalTime(marker.globalTime);
-            if (marker.testStepId != null) {
-                this.hitMarkers.add(marker.testStepId);
-                const fullMarker = this.flattenMarkers(this.stepMarkers).find(m => m.testStepId === marker.testStepId);
-                if (fullMarker)
-                    this.markerHit.emit(fullMarker);
-            }
-        });
-    }
     toggleFullScreen() {
         const wasPlaying = this.isPlaying;
         const currentTime = this.vplayer?.nativeElement?.currentTime || 0;
@@ -12690,20 +12581,15 @@ class SimulatorComponent {
     }
     onSegmentChange(value) {
         this.currentView = value;
-        // Pause video when switching away from video view
         if (this.currentView !== 'video') {
             this.pauseVideo();
             this.progress = 0;
         }
         else {
-            // Reset everything when switching back to video view
             this.enqueueOperation(async () => {
                 await this.resetVideoStateInternal();
-                // If multiple videos, reset to first video
                 if (this.hasMultipleVideos && this.videoUrls) {
                     this.currentVideoIndex = 0;
-                    this.targetGlobalTimeDuringSwitch = 0;
-                    // Switch to first video and seek to 0
                     await this.switchToVideoAndSeekInternal(0);
                 }
             });
@@ -12898,6 +12784,63 @@ class SimulatorComponent {
         }
         return null;
     }
+    async switchToVideoAndResetInternal(targetVideoIndex) {
+        const video = this.vplayer?.nativeElement;
+        if (!video || !this.videoUrls || targetVideoIndex < 0 || targetVideoIndex >= this.videoUrls.length) {
+            return;
+        }
+        if (this.currentVideoIndex === targetVideoIndex) {
+            await this.resetVideoStateInternal();
+            return;
+        }
+        this.playerState = 'switching';
+        try {
+            video.pause();
+            this.isPlaying = false;
+            this.playPromise = null;
+            this.videoPause.emit();
+            this.isVideoPlayingChange.emit(false);
+            this.currentVideoIndex = targetVideoIndex;
+            await new Promise((resolve, reject) => {
+                let resolved = false;
+                const cleanup = () => {
+                    if (resolved)
+                        return;
+                    resolved = true;
+                    video.removeEventListener('loadedmetadata', onLoadedMetadata);
+                    video.removeEventListener('error', onError);
+                };
+                const onLoadedMetadata = () => {
+                    cleanup();
+                    resolve();
+                };
+                const onError = () => {
+                    cleanup();
+                    reject(new Error('Failed to load video'));
+                };
+                setTimeout(() => {
+                    if (resolved)
+                        return;
+                    video.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
+                    video.addEventListener('error', onError, { once: true });
+                }, 100);
+            });
+            video.currentTime = 0;
+            this.progress = 0;
+            this.playPromise = null;
+            this.hitMarkers.clear();
+            this.lastSetDuration = -1;
+            const segmentStart = targetVideoIndex === 0 ? 0 : (this.segmentBoundaries[targetVideoIndex - 1] ?? 0);
+            this.videoTimeUpdate.emit(segmentStart);
+        }
+        catch (err) {
+            console.error('[Simulator] switchToVideoAndReset failed:', err);
+            this.progress = 0;
+        }
+        finally {
+            this.playerState = 'paused';
+        }
+    }
     switchToVideoAndSeek(cumulativeTimestamp) {
         this.enqueueOperation(() => this.switchToVideoAndSeekInternal(cumulativeTimestamp));
     }
@@ -12922,20 +12865,13 @@ class SimulatorComponent {
         const video = this.vplayer?.nativeElement;
         if (!video)
             return;
-        const total = this.totalDuration;
-        this.targetGlobalTimeDuringSwitch = cumulativeTimestamp;
-        if (total > 0) {
-            this.progress = Math.min(100, Math.max(0, (cumulativeTimestamp / total) * 100));
-        }
         this.playerState = 'switching';
         try {
-            // CRITICAL: Pause before switching source
             video.pause();
             this.isPlaying = false;
             this.playPromise = null;
             this.videoPause.emit();
             this.isVideoPlayingChange.emit(false);
-            // Switch video source
             this.currentVideoIndex = targetVideoIndex;
             await new Promise((resolve, reject) => {
                 let resolved = false;
@@ -12945,20 +12881,13 @@ class SimulatorComponent {
                     resolved = true;
                     video.removeEventListener('loadedmetadata', onLoadedMetadata);
                     video.removeEventListener('error', onError);
-                    clearTimeout(timeoutId);
                 };
                 const onLoadedMetadata = () => {
                     cleanup();
-                    console.log('[Simulator] switchToVideoAndSeek: loadedmetadata', {
-                        readyState: video.readyState,
-                        duration: video.duration,
-                        currentTime: video.currentTime
-                    });
                     resolve();
                 };
                 const onError = () => {
                     cleanup();
-                    console.error('[Simulator] switchToVideoAndSeek: video error');
                     reject(new Error('Failed to load video'));
                 };
                 setTimeout(() => {
@@ -12967,120 +12896,50 @@ class SimulatorComponent {
                     video.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
                     video.addEventListener('error', onError, { once: true });
                 }, 100);
-                const timeoutId = setTimeout(() => {
-                    cleanup();
-                    if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
-                        console.log('[Simulator] switchToVideoAndSeek: metadata timeout but video ready', {
-                            readyState: video.readyState,
-                            duration: video.duration
-                        });
-                        resolve();
-                    }
-                    else {
-                        console.error('[Simulator] switchToVideoAndSeek: metadata timeout and video not ready');
-                        reject(new Error('Timeout waiting for video to load'));
-                    }
-                }, 2000);
             });
-            // Seek to the target position using 'seeked' event for reliability
             const seekSeconds = relativeTimestamp / 1000;
             const targetTime = Math.max(0, Math.min(seekSeconds, video.duration || seekSeconds));
-            console.log('[Simulator] switchToVideoAndSeek: setting currentTime', {
-                targetTime,
-                seekSeconds,
-                relativeTimestamp,
-                videoDuration: video.duration
-            });
             await new Promise((resolve) => {
-                let resolved = false;
                 const onSeeked = () => {
-                    if (resolved)
-                        return;
-                    resolved = true;
                     video.removeEventListener('seeked', onSeeked);
                     clearTimeout(timeoutId);
-                    console.log('[Simulator] switchToVideoAndSeek: seeked event fired', {
-                        currentTime: video.currentTime,
-                        targetTime,
-                        diff: Math.abs(video.currentTime - targetTime)
-                    });
-                    // Small delay to ensure browser has processed the seek
                     setTimeout(() => resolve(), 100);
                 };
                 video.addEventListener('seeked', onSeeked, { once: true });
                 video.currentTime = targetTime;
-                // Fallback timeout
                 const timeoutId = setTimeout(() => {
-                    if (resolved)
-                        return;
-                    resolved = true;
                     video.removeEventListener('seeked', onSeeked);
-                    console.log('[Simulator] switchToVideoAndSeek: seeked timeout, current time is', video.currentTime);
                     resolve();
                 }, 1000);
             });
             this.lastSetDuration = cumulativeTimestamp;
-            // Double-check: if video is not at target, force it again
             if (Math.abs(video.currentTime - targetTime) > 0.5) {
-                console.warn('[Simulator] switchToVideoAndSeek: video not at target after seeked, forcing again', {
-                    currentTime: video.currentTime,
-                    targetTime
-                });
                 video.currentTime = targetTime;
                 await new Promise(resolve => setTimeout(resolve, 200));
             }
-            // Verify seek completed
-            const actualGlobal = this.getActualGlobalTime();
-            const actualVideoTime = video.currentTime;
-            console.log('[Simulator] switchToVideoAndSeek: seek verification', {
-                actualGlobal,
-                targetGlobal: cumulativeTimestamp,
-                diff: Math.abs(actualGlobal - cumulativeTimestamp),
-                actualVideoTime,
-                targetVideoTime: targetTime,
-                videoDiff: Math.abs(actualVideoTime - targetTime)
-            });
-            // Clear override only if video is actually at the target
-            const tolerance = 500;
-            if (Math.abs(actualGlobal - cumulativeTimestamp) < tolerance) {
-                this.targetGlobalTimeDuringSwitch = null;
-                console.log('[Simulator] switchToVideoAndSeek: cleared override - video at target');
-            }
-            // Update UI with actual current position
-            if (total > 0) {
-                this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / total) * 100));
+            // Per-video progress
+            const durationMs = video.duration * 1000;
+            if (durationMs > 0) {
+                this.progress = Math.min(100, Math.max(0, (video.currentTime * 1000 / durationMs) * 100));
             }
-            this.videoTimeUpdate.emit(this.globalCurrentTime);
+            this.videoTimeUpdate.emit(cumulativeTimestamp);
         }
         catch (err) {
             console.error('[Simulator] switchToVideoAndSeek failed:', err);
-            // Even on error, try to update to target position
-            if (total > 0) {
-                this.progress = Math.min(100, Math.max(0, (cumulativeTimestamp / total) * 100));
-            }
+            this.progress = 0;
             this.videoTimeUpdate.emit(cumulativeTimestamp);
         }
         finally {
             this.playerState = 'paused';
             this.hitMarkers.clear();
-            // Don't clear targetGlobalTimeDuringSwitch here - it's either already cleared
-            // or will be cleared by timeupdate handler when video reaches target
-        }
-        console.log('[Simulator] switchToVideoAndSeek: complete', {
-            currentVideoIndex: this.currentVideoIndex,
-            videoCurrentTime: video.currentTime,
-            globalCurrentTime: this.globalCurrentTime,
-            targetGlobalTimeDuringSwitch: this.targetGlobalTimeDuringSwitch,
-            playerState: this.playerState,
-            progress: this.progress
-        });
+        }
     }
 }
 SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n          <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === 'device'}\">\n            <img\n              [src]=\"deviceMockupImage\"\n              alt=\"Device mockup\"\n              class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n            />\n            <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n              <!-- Loading State -->\n              <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n                <div class=\"cqa-mb-4\">\n                  <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n                </div>\n                <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n              </div>\n\n              <!-- Live Content (when not loading) -->\n              <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n                <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                  <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                    <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                    <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                  </div>\n                </div>\n                <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-83px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(globalCurrentTime / 1000) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div \n            #timelineBar\n            class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n            (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of globalStepMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"totalDuration > 0 ? (marker.globalTime / totalDuration) * 100 : 0\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(totalDuration / 1000) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n          <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === 'device', '!cqa-h-full !cqa-max-h-[500px]': shouldApplySmallHeightClasses}\">\n            <img\n              [src]=\"deviceMockupImage\"\n              alt=\"Device mockup\"\n              class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n            />\n            <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n              <!-- Loading State -->\n              <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n                <div class=\"cqa-mb-4\">\n                  <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n                </div>\n                <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n              </div>\n\n              <!-- Live Content (when not loading) -->\n              <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n                <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                  <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                    <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                    <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                  </div>\n                </div>\n                <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-97px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n          <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === 'device'}\">\n            <img\n              [src]=\"deviceMockupImage\"\n              alt=\"Device mockup\"\n              class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n            />\n            <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n              <!-- Loading State -->\n              <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n                <div class=\"cqa-mb-4\">\n                  <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n                </div>\n                <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n              </div>\n\n              <!-- Live Content (when not loading) -->\n              <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n                <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                  <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                    <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                    <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                  </div>\n                </div>\n                <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-83px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(globalCurrentTime / 1000) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div \n            #timelineBar\n            class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n            (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of globalStepMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"totalDuration > 0 ? (marker.globalTime / totalDuration) * 100 : 0\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(totalDuration / 1000) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n          <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === 'device', '!cqa-h-full !cqa-max-h-[500px]': shouldApplySmallHeightClasses}\">\n            <img\n              [src]=\"deviceMockupImage\"\n              alt=\"Device mockup\"\n              class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n            />\n            <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\n              <!-- Loading State -->\n              <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n                <div class=\"cqa-mb-4\">\n                  <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n                </div>\n                <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n              </div>\n\n              <!-- Live Content (when not loading) -->\n              <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n                <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                  <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                    <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                    <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                  </div>\n                </div>\n                <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-97px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-min-w-max': platformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoUrl: [{
                 type: Input
             }], videoUrls: [{
@@ -19206,6 +19065,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Create Step Group panel/modal for Test Case Details.
+ * Follows the same structure and validation pattern as Test Data Modal and Loop Step.
+ * Displays selected steps and allows naming the new group; emits createGroup with group name
+ * so the host can create the step group and replace selected steps with it.
+ */
+class CreateStepGroupComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.stepsToGroup = [];
+        this.createGroup = new EventEmitter();
+        this.cancelled = new EventEmitter();
+        this.form = this.fb.group({
+            groupName: ['', [Validators.required, Validators.minLength(1)]],
+        });
+    }
+    get stepsCount() {
+        return this.stepsToGroup?.length ?? 0;
+    }
+    get subtitleText() {
+        const n = this.stepsCount;
+        return n === 1
+            ? 'Group 1 selected step into a container'
+            : `Group ${n} selected steps into a container`;
+    }
+    /** Display label for a step in the "Steps to group" list (same pattern as normal-step display). */
+    getStepDisplayLabel(step, index) {
+        if (isNormalStepConfig(step)) {
+            return this.getNormalStepLabel(step);
+        }
+        if ('groupName' in step && step.groupName) {
+            return step.groupName;
+        }
+        if ('condition' in step && step.condition) {
+            return step.condition;
+        }
+        if ('loopType' in step) {
+            const loop = step;
+            if (loop.loopType === 'for' && loop.testDataProfile) {
+                return `For loop: ${loop.testDataProfile}`;
+            }
+            if (loop.loopType === 'while' && loop.condition) {
+                return `While: ${loop.condition}`;
+            }
+        }
+        if (step.description) {
+            return step.description;
+        }
+        return `Step ${index + 1}`;
+    }
+    getNormalStepLabel(step) {
+        const params = step.parameters ?? [];
+        const getParam = (name) => params.find((p) => p.name?.toLowerCase() === name.toLowerCase());
+        const val = (p) => p?.displayValue ?? p?.value ?? '';
+        switch (step.eventType) {
+            case 'navigate': {
+                const url = getParam('url');
+                return url ? `Navigate to ${val(url)}` : 'Navigate';
+            }
+            case 'ai-agent': {
+                const instructions = getParam('instructions') ?? getParam('description');
+                return val(instructions) || 'AI Agent step';
+            }
+            case 'type':
+                return val(getParam('text')) || 'Type';
+            case 'click':
+                return val(getParam('selector')) ? `Click ${val(getParam('selector'))}` : 'Click';
+            case 'verify':
+                return val(getParam('description')) || 'Verify';
+            case 'custom': {
+                const desc = getParam('description') ?? getParam('action');
+                return val(desc) || 'Custom step';
+            }
+            default:
+                return val(getParam('description')) || val(params[0]) || 'Step';
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onCreateGroup() {
+        if (this.form.invalid || this.stepsCount === 0) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        const groupName = (this.form.get('groupName')?.value ?? '').trim();
+        if (!groupName) {
+            this.form.get('groupName')?.setErrors({ required: true });
+            return;
+        }
+        this.createGroup.emit({ groupName });
+    }
+}
+CreateStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup" }, outputs: { createGroup: "createGroup", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n        Create step group\n      </h2>\n      <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n        {{ subtitleText }}\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Group name * -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n      Group name <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <cqa-custom-input\n      placeholder=\"e.g., Authentication flow\"\n      [value]=\"form.get('groupName')?.value\"\n      [fullWidth]=\"true\"\n      size=\"md\"\n      (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n    </cqa-custom-input>\n    <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n      Group name is required.\n    </p>\n  </div>\n\n  <!-- Steps to group (N) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      Steps to group ({{ stepsCount }})\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToGroup; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n        <!-- Numbered badge -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Actions: Cancel | Create group -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        text=\"Create group\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n        (clicked)=\"onCreateGroup()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ 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"] }, { 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: CreateStepGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-create-step-group', host: { class: 'cqa-ui-root' }, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n        Create step group\n      </h2>\n      <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n        {{ subtitleText }}\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Group name * -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n      Group name <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <cqa-custom-input\n      placeholder=\"e.g., Authentication flow\"\n      [value]=\"form.get('groupName')?.value\"\n      [fullWidth]=\"true\"\n      size=\"md\"\n      (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n    </cqa-custom-input>\n    <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n      Group name is required.\n    </p>\n  </div>\n\n  <!-- Steps to group (N) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      Steps to group ({{ stepsCount }})\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToGroup; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n        <!-- Numbered badge -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Actions: Cancel | Create group -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        text=\"Create group\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n        (clicked)=\"onCreateGroup()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { stepsToGroup: [{
+                type: Input
+            }], createGroup: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+/**
+ * Delete Steps confirmation modal for Test Case Details.
+ * Matches the design of Create Step Group: shows selected steps with context (e.g. "IF lane"),
+ * warning text, and Cancel / Delete actions. Steps are shown with red/danger styling.
+ */
+class DeleteStepsComponent {
+    constructor() {
+        /** Steps that will be deleted (shown in the list). */
+        this.stepsToDelete = [];
+        /** Context label for the sub-heading, e.g. "IF lane", "ELSE", "For loop". */
+        this.contextLabel = '';
+        this.confirmDelete = new EventEmitter();
+        this.cancelled = new EventEmitter();
+    }
+    get stepsCount() {
+        return this.stepsToDelete?.length ?? 0;
+    }
+    get titleText() {
+        const n = this.stepsCount;
+        return n === 1 ? 'Delete 1 step?' : `Delete ${n} steps?`;
+    }
+    get selectedStepsSubtitle() {
+        const ctx = this.contextLabel?.trim() || 'selected';
+        return `Selected steps for ${ctx} (${this.stepsCount})`;
+    }
+    /** Display label for a step in the list (same pattern as create-step-group). */
+    getStepDisplayLabel(step, index) {
+        if (isNormalStepConfig(step)) {
+            return this.getNormalStepLabel(step);
+        }
+        if ('groupName' in step && step.groupName) {
+            return step.groupName;
+        }
+        if ('condition' in step && step.condition) {
+            return step.condition;
+        }
+        if ('loopType' in step) {
+            const loop = step;
+            if (loop.loopType === 'for' && loop.testDataProfile) {
+                return `For loop: ${loop.testDataProfile}`;
+            }
+            if (loop.loopType === 'while' && loop.condition) {
+                return `While: ${loop.condition}`;
+            }
+        }
+        if (step.description) {
+            return step.description;
+        }
+        return `Step ${index + 1}`;
+    }
+    getNormalStepLabel(step) {
+        const params = step.parameters ?? [];
+        const getParam = (name) => params.find((p) => p.name?.toLowerCase() === name.toLowerCase());
+        const val = (p) => p?.displayValue ?? p?.value ?? '';
+        switch (step.eventType) {
+            case 'navigate': {
+                const url = getParam('url');
+                return url ? `Navigate to ${val(url)}` : 'Navigate to';
+            }
+            case 'ai-agent': {
+                const instructions = getParam('instructions') ?? getParam('description');
+                return val(instructions) || 'AI Agent step';
+            }
+            case 'type':
+                return val(getParam('text')) || 'Type';
+            case 'click':
+                return val(getParam('selector')) ? `Click ${val(getParam('selector'))}` : 'Click';
+            case 'verify':
+                return val(getParam('description')) || 'Verify';
+            case 'custom': {
+                const desc = getParam('description') ?? getParam('action');
+                return val(desc) || 'Custom step';
+            }
+            default:
+                return val(getParam('description')) || val(params[0]) || 'Step';
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onDelete() {
+        this.confirmDelete.emit();
+    }
+}
+DeleteStepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DeleteStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DeleteStepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DeleteStepsComponent, selector: "cqa-delete-steps", inputs: { stepsToDelete: "stepsToDelete", contextLabel: "contextLabel" }, outputs: { confirmDelete: "confirmDelete", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n        {{ titleText }}\n      </h2>\n      <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n        This action cannot be undone, but you can use the undo function in the toolbar.\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Selected steps for [context] (N) \u2013 scroll when many steps, scrollbar hidden (same as create-step-group) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      {{ selectedStepsSubtitle }}\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-min-h-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToDelete; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-[8px] cqa-rounded-[4px] cqa-pt-[4px] cqa-pb-[4px] cqa-pl-[8px] cqa-pr-[8px] cqa-bg-[rgba(238,63,63,0.1)]\">\n        <!-- Numbered badge (red) -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#C63535] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#DC2626] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>  \n\n  <!-- Actions: Cancel | Delete (right-aligned) -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      variant=\"filled\"\n      btnSize=\"lg\"\n      text=\"Delete\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#EE3F3F] cqa-text-white'\"\n      (clicked)=\"onDelete()\">\n    </cqa-button>\n  </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DeleteStepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-delete-steps', host: { class: 'cqa-ui-root' }, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n        {{ titleText }}\n      </h2>\n      <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n        This action cannot be undone, but you can use the undo function in the toolbar.\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Selected steps for [context] (N) \u2013 scroll when many steps, scrollbar hidden (same as create-step-group) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      {{ selectedStepsSubtitle }}\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-min-h-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToDelete; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-[8px] cqa-rounded-[4px] cqa-pt-[4px] cqa-pb-[4px] cqa-pl-[8px] cqa-pr-[8px] cqa-bg-[rgba(238,63,63,0.1)]\">\n        <!-- Numbered badge (red) -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#C63535] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#DC2626] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>  \n\n  <!-- Actions: Cancel | Delete (right-aligned) -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      variant=\"filled\"\n      btnSize=\"lg\"\n      text=\"Delete\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#EE3F3F] cqa-text-white'\"\n      (clicked)=\"onDelete()\">\n    </cqa-button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { stepsToDelete: [{
+                type: Input
+            }], contextLabel: [{
+                type: Input
+            }], confirmDelete: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
 class LiveConversationComponent {
     constructor() {
         this.conversation = null;
@@ -19554,7 +19618,7 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean, non-custom_code variables -->\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { 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"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean, non-custom_code variables -->\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { 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"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: StepBuilderActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean, non-custom_code variables -->\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
@@ -20263,7 +20327,7 @@ class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\n                  <!-- Boolean variables with mat-slide-toggle -->\n                  <ng-container *ngIf=\"variable.type === 'boolean'\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, variable.name, $event.checked)\"\n                        color=\"primary\">\n                      </mat-slide-toggle>\n                    </div>\n                  </ng-container>\n                  \n                  <!-- Non-boolean, non-custom_code variables -->\n                  <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { 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"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\n                  <!-- Boolean variables with mat-slide-toggle -->\n                  <ng-container *ngIf=\"variable.type === 'boolean'\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, variable.name, $event.checked)\"\n                        color=\"primary\">\n                      </mat-slide-toggle>\n                    </div>\n                  </ng-container>\n                  \n                  <!-- Non-boolean, non-custom_code variables -->\n                  <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { 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"] }, { type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\n                  <!-- Boolean variables with mat-slide-toggle -->\n                  <ng-container *ngIf=\"variable.type === 'boolean'\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, variable.name, $event.checked)\"\n                        color=\"primary\">\n                      </mat-slide-toggle>\n                    </div>\n                  </ng-container>\n                  \n                  <!-- Non-boolean, non-custom_code variables -->\n                  <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
@@ -20603,19 +20667,97 @@ class StepBuilderCustomCodeComponent {
         this.fb = fb;
         /** Options for language dropdown */
         this.languageOptions = [];
+        /** Template to get variables from */
+        this.template = null;
+        /** Function to handle variable processing or custom logic. Can be passed from parent component. */
+        this.setTemplateVariables = () => { return []; };
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
         this.cancelled = new EventEmitter();
+        this.templateVariables = [];
         this.customCodeForm = this.fb.group({
             language: ['', Validators.required],
             code: ['', Validators.required],
             metadata: [''],
             description: ['']
         });
+        this.variablesForm = this.fb.group({});
     }
     ngOnInit() {
-        // Component initialization
+        // Initialize template variables if template is provided
+        if (this.template) {
+            this.loadTemplateVariables();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['template'] && this.template) {
+            this.loadTemplateVariables();
+        }
+    }
+    loadTemplateVariables() {
+        if (this.template && this.setTemplateVariables) {
+            this.templateVariables = this.setTemplateVariables(this.template);
+            this.buildVariablesForm();
+        }
+    }
+    buildVariablesForm() {
+        // Clear existing form controls
+        Object.keys(this.variablesForm.controls).forEach(key => {
+            this.variablesForm.removeControl(key);
+        });
+        // Add form controls for each variable
+        this.templateVariables.forEach(variable => {
+            // Handle boolean variables - use boolean value, others use string
+            const defaultValue = variable.type === 'boolean'
+                ? (variable.value === true || variable.value === 'true' || variable.value === 1)
+                : (variable.value || '');
+            this.variablesForm.addControl(variable.name, new FormControl(defaultValue));
+        });
+    }
+    getSelectConfig(variable) {
+        const options = (variable.options || []).map((opt) => ({
+            id: opt,
+            value: opt,
+            name: opt,
+            label: opt
+        }));
+        return {
+            key: variable.name,
+            placeholder: `Select ${variable.label}`,
+            multiple: false,
+            searchable: false,
+            options: options,
+            onChange: (value) => {
+                this.onVariableValueChange(variable.name, value);
+            }
+        };
+    }
+    onVariableValueChange(variableName, value) {
+        // Update the variable in templateVariables array
+        const variable = this.templateVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form control
+        if (this.variablesForm.get(variableName)) {
+            this.variablesForm.get(variableName)?.setValue(value);
+        }
+    }
+    onVariableBooleanChange(variableName, value) {
+        // Update the variable in templateVariables array
+        const variable = this.templateVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form control
+        if (this.variablesForm.get(variableName)) {
+            this.variablesForm.get(variableName)?.setValue(value);
+        }
+        else {
+            // Create form control if it doesn't exist
+            this.variablesForm.addControl(variableName, new FormControl(value));
+        }
     }
     getLanguageConfig() {
         return {
@@ -20636,19 +20778,24 @@ class StepBuilderCustomCodeComponent {
                 language: formValue.language || '',
                 code: formValue.code || '',
                 metadata: formValue.metadata || '',
-                description: formValue.description || ''
+                description: formValue.description || '',
+                templateVariables: this.templateVariables.length > 0 ? this.templateVariables : undefined
             };
             this.createStep.emit(stepData);
         }
     }
 }
 StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle", "customClass"], outputs: ["valueChange", "blurred", "focused"] }, { 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"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }] });
+StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle", "customClass"], outputs: ["valueChange", "blurred", "focused"] }, { 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"] }, { type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: StepBuilderCustomCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { languageOptions: [{
                 type: Input
+            }], template: [{
+                type: Input
+            }], setTemplateVariables: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -21080,6 +21227,505 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+class StepBuilderApiComponent {
+    constructor(fb) {
+        this.fb = fb;
+        /** Options for HTTP method dropdown */
+        this.httpMethodOptions = [
+            { id: 'GET', value: 'GET', name: 'GET', label: 'GET' },
+            { id: 'POST', value: 'POST', name: 'POST', label: 'POST' },
+            { id: 'PUT', value: 'PUT', name: 'PUT', label: 'PUT' },
+            { id: 'PATCH', value: 'PATCH', name: 'PATCH', label: 'PATCH' },
+            { id: 'DELETE', value: 'DELETE', name: 'DELETE', label: 'DELETE' },
+            { id: 'HEAD', value: 'HEAD', name: 'HEAD', label: 'HEAD' },
+            { id: 'OPTIONS', value: 'OPTIONS', name: 'OPTIONS', label: 'OPTIONS' }
+        ];
+        /** Options for header name dropdown */
+        this.headerNameOptions = [];
+        /** Current progress step */
+        this.currentStep = 'request-details';
+        /** Response preview data */
+        this.responsePreview = null;
+        /** Loading state */
+        this.isLoading = false;
+        /** Emit when step is created */
+        this.createStep = new EventEmitter();
+        /** Emit when cancelled */
+        this.cancelled = new EventEmitter();
+        /** Emit when request is sent */
+        this.sendRequest = new EventEmitter();
+        /** Emit when cURL is imported */
+        this.importCurl = new EventEmitter();
+        this.selectedTab = 'headers';
+        this.selectedProgressStep = 'request-details';
+        // progressSteps: ProgressStep[] = ['request-details', 'store-response', 'validation'];
+        // Cache config objects to prevent infinite change detection loops
+        this.verificationTypeConfigCache = null;
+        this.expectedTypeConfigCache = null;
+        this.httpMethodConfigCache = null;
+        this.headerNameConfigCache = null;
+        this.paramNameConfigCache = null;
+        this.hasLoadedInitialData = false;
+        this.apiForm = this.fb.group({
+            method: ['GET', Validators.required],
+            url: ['', Validators.required],
+            headers: this.fb.array([]),
+            body: [''],
+            params: this.fb.array([]),
+            scripts: [''],
+            variableName: [''],
+            validation: this.fb.array([])
+        });
+    }
+    ngOnInit() {
+        // Sync currentStep input with selectedProgressStep
+        if (this.currentStep) {
+            this.selectedProgressStep = this.currentStep;
+        }
+        // Load initial data if provided (edit mode)
+        if (this.initialData) {
+            this.loadInitialData(this.initialData);
+            this.hasLoadedInitialData = true;
+        }
+        else {
+            // Add initial header row for new step
+            this.addHeader();
+        }
+        // Initialize validation form array if starting on validation step
+        if (this.selectedProgressStep === 'validation' && this.validationFormArray.length === 0) {
+            this.addValidationRule();
+        }
+    }
+    loadInitialData(data) {
+        console.log('loadInitialData: Loading data', data);
+        console.log('loadInitialData: Headers count', data.headers?.length || 0);
+        console.log('loadInitialData: Headers data', data.headers);
+        // Set basic fields
+        this.apiForm.patchValue({
+            method: data.method || 'GET',
+            url: data.url || '',
+            body: data.body || '',
+            scripts: data.scripts || '',
+            variableName: data.variableName || ''
+        });
+        // Load headers
+        // Clear existing headers first
+        while (this.headersFormArray.length !== 0) {
+            this.headersFormArray.removeAt(0);
+        }
+        if (data.headers && data.headers.length > 0) {
+            // Add headers from initial data (include all headers, even if empty)
+            data.headers.forEach(header => {
+                const headerGroup = this.fb.group({
+                    name: [header.name || '', Validators.required],
+                    value: [header.value || '', Validators.required]
+                });
+                this.headersFormArray.push(headerGroup);
+            });
+            console.log('loadInitialData: Loaded headers into form array, count:', this.headersFormArray.length);
+        }
+        // Ensure at least one header row exists
+        if (this.headersFormArray.length === 0) {
+            console.log('loadInitialData: No headers found, adding empty header row');
+            this.addHeader();
+        }
+        // Load params
+        // Clear existing params first
+        while (this.paramsFormArray.length !== 0) {
+            this.paramsFormArray.removeAt(0);
+        }
+        if (data.params && data.params.length > 0) {
+            // Add params from initial data (include all params, even if empty)
+            data.params.forEach(param => {
+                const paramGroup = this.fb.group({
+                    name: [param.name || '', Validators.required],
+                    value: [param.value || '', Validators.required]
+                });
+                this.paramsFormArray.push(paramGroup);
+            });
+        }
+        // Load validation rules
+        if (data.validation && data.validation.length > 0) {
+            // Clear existing validation rules
+            while (this.validationFormArray.length !== 0) {
+                this.validationFormArray.removeAt(0);
+            }
+            // Add validation rules from initial data
+            data.validation.forEach(rule => {
+                const validationGroup = this.fb.group({
+                    jsonPath: [rule.jsonPath || '', Validators.required],
+                    verificationType: [rule.verificationType || 'equals', Validators.required],
+                    expectedType: [rule.expectedType || 'string', Validators.required],
+                    expectedValue: [rule.expectedValue !== undefined ? rule.expectedValue : '', Validators.required],
+                    result: [rule.result || 'Not run'],
+                    checked: [rule.checked || false]
+                });
+                // Ensure all controls are enabled
+                validationGroup.enable({ emitEvent: false });
+                this.validationFormArray.push(validationGroup);
+            });
+        }
+    }
+    get headersFormArray() {
+        return this.apiForm.get('headers');
+    }
+    get paramsFormArray() {
+        return this.apiForm.get('params');
+    }
+    get validationFormArray() {
+        return this.apiForm.get('validation');
+    }
+    addHeader() {
+        const headerGroup = this.fb.group({
+            name: ['', Validators.required],
+            value: ['', Validators.required]
+        });
+        this.headersFormArray.push(headerGroup);
+    }
+    removeHeader(index) {
+        this.headersFormArray.removeAt(index);
+    }
+    addParam() {
+        const paramGroup = this.fb.group({
+            name: ['', Validators.required],
+            value: ['', Validators.required]
+        });
+        this.paramsFormArray.push(paramGroup);
+    }
+    removeParam(index) {
+        this.paramsFormArray.removeAt(index);
+    }
+    ngOnChanges(changes) {
+        // Reset config caches when inputs change
+        if (changes['httpMethodOptions']) {
+            this.httpMethodConfigCache = null;
+        }
+        if (changes['headerNameOptions']) {
+            this.headerNameConfigCache = null;
+        }
+        // Load initial data if it's set after component initialization
+        if (changes['initialData'] && !changes['initialData'].firstChange && this.initialData && !this.hasLoadedInitialData) {
+            this.loadInitialData(this.initialData);
+            this.hasLoadedInitialData = true;
+        }
+    }
+    getHttpMethodConfig() {
+        if (!this.httpMethodConfigCache) {
+            this.httpMethodConfigCache = {
+                key: 'method',
+                placeholder: 'Select method',
+                multiple: false,
+                searchable: false,
+                options: this.httpMethodOptions
+            };
+        }
+        return this.httpMethodConfigCache;
+    }
+    getHeaderNameConfig(index) {
+        if (!this.headerNameConfigCache) {
+            const defaultOptions = [
+                { id: 'string', value: 'string', name: 'string', label: 'string' },
+                { id: 'Content-Type', value: 'Content-Type', name: 'Content-Type', label: 'Content-Type' },
+                { id: 'Authorization', value: 'Authorization', name: 'Authorization', label: 'Authorization' },
+                { id: 'Accept', value: 'Accept', name: 'Accept', label: 'Accept' }
+            ];
+            this.headerNameConfigCache = {
+                key: 'name',
+                placeholder: 'Select header',
+                multiple: false,
+                searchable: true,
+                options: this.headerNameOptions.length > 0 ? this.headerNameOptions : defaultOptions
+            };
+        }
+        return this.headerNameConfigCache;
+    }
+    getParamNameConfig(index) {
+        if (!this.paramNameConfigCache) {
+            this.paramNameConfigCache = {
+                key: 'name',
+                placeholder: 'Parameter name',
+                multiple: false,
+                searchable: false,
+                options: []
+            };
+        }
+        return this.paramNameConfigCache;
+    }
+    getHeaderFormGroup(index) {
+        return this.headersFormArray.at(index);
+    }
+    getParamFormGroup(index) {
+        return this.paramsFormArray.at(index);
+    }
+    onTabChange(tab) {
+        this.selectedTab = tab;
+    }
+    onSendRequest() {
+        if (this.apiForm.valid) {
+            const formValue = this.apiForm.value;
+            const headers = formValue.headers.map((h) => ({
+                name: h.name,
+                value: h.value
+            }));
+            const params = formValue.params ? formValue.params.map((p) => ({
+                name: p.name,
+                value: p.value
+            })) : [];
+            this.sendRequest.emit({
+                method: formValue.method,
+                url: formValue.url,
+                headers,
+                body: formValue.body,
+                params
+            });
+        }
+    }
+    onImportCurl() {
+        this.importCurl.emit();
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onCreateStep() {
+        if (this.apiForm.valid) {
+            const formValue = this.apiForm.value;
+            const stepData = {
+                method: formValue.method,
+                url: formValue.url,
+                headers: formValue.headers.map((h) => ({
+                    name: h.name,
+                    value: h.value
+                })),
+                body: formValue.body,
+                params: formValue.params ? formValue.params.map((p) => ({
+                    name: p.name,
+                    value: p.value
+                })) : [],
+                scripts: formValue.scripts,
+                variableName: formValue.variableName || '',
+                validation: formValue.validation ? formValue.validation.map((v) => ({
+                    jsonPath: v.jsonPath,
+                    verificationType: v.verificationType,
+                    expectedType: v.expectedType,
+                    expectedValue: v.expectedValue,
+                    result: v.result || 'Not run'
+                })) : []
+            };
+            this.createStep.emit(stepData);
+        }
+    }
+    onNext() {
+        // Move to next step or create step if on last step
+        const stepOrder = ['request-details', 'store-response', 'validation'];
+        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
+        if (currentIndex < stepOrder.length - 1) {
+            this.onProgressStepChange(stepOrder[currentIndex + 1]);
+        }
+        else {
+            this.onCreateStep();
+        }
+    }
+    onBack() {
+        // Move to previous step
+        const stepOrder = ['request-details', 'store-response', 'validation'];
+        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
+        if (currentIndex > 0) {
+            this.onProgressStepChange(stepOrder[currentIndex - 1]);
+        }
+    }
+    canGoBack() {
+        const stepOrder = ['request-details', 'store-response', 'validation'];
+        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
+        return currentIndex > 0;
+    }
+    isLastStep() {
+        const stepOrder = ['request-details', 'store-response', 'validation'];
+        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
+        return currentIndex === stepOrder.length - 1;
+    }
+    getProgressStepClass(step) {
+        const stepOrder = ['request-details', 'store-response', 'validation'];
+        const currentIndex = stepOrder.indexOf(this.currentStep);
+        const stepIndex = stepOrder.indexOf(step);
+        if (stepIndex < currentIndex) {
+            return 'cqa-text-gray-400'; // Completed
+        }
+        else if (stepIndex === currentIndex) {
+            return 'cqa-text-purple-600 cqa-font-semibold'; // Active
+        }
+        else {
+            return 'cqa-text-gray-400'; // Pending
+        }
+    }
+    getProgressStepNumber(step) {
+        const stepOrder = ['request-details', 'store-response', 'validation'];
+        return stepOrder.indexOf(step) + 1;
+    }
+    getProgressStepLabel(step) {
+        const labels = {
+            'request-details': 'Request Details',
+            'store-response': 'Store Response',
+            'validation': 'Validation'
+        };
+        return labels[step];
+    }
+    formatJsonResponse(data) {
+        if (!data)
+            return '';
+        try {
+            return JSON.stringify(data, null, 2);
+        }
+        catch {
+            return String(data);
+        }
+    }
+    onProgressStepChange(step) {
+        this.selectedProgressStep = step;
+        // Initialize validation form array if switching to validation step
+        if (step === 'validation' && this.validationFormArray.length === 0) {
+            this.addValidationRule();
+        }
+    }
+    addValidationRule() {
+        const validationGroup = this.fb.group({
+            checked: [false],
+            jsonPath: ['', Validators.required],
+            verificationType: ['equals'],
+            expectedType: ['string'],
+            expectedValue: ['', Validators.required],
+            result: ['Not run']
+        });
+        // Ensure all controls are enabled to avoid disabled attribute warnings
+        validationGroup.enable({ emitEvent: false });
+        this.validationFormArray.push(validationGroup);
+    }
+    removeValidationRule(index) {
+        this.validationFormArray.removeAt(index);
+    }
+    getValidationFormGroup(index) {
+        return this.validationFormArray.at(index);
+    }
+    trackByValidationRuleIndex(index) {
+        return index;
+    }
+    trackByHeaderIndex(index) {
+        return index;
+    }
+    trackByParamIndex(index) {
+        return index;
+    }
+    getVerificationTypeOptions() {
+        return [
+            { id: 'equals', value: 'equals', name: 'Equals', label: 'Equals' },
+            { id: 'not_equals', value: 'not_equals', name: 'Not Equals', label: 'Not Equals' },
+            { id: 'contains', value: 'contains', name: 'Contains', label: 'Contains' },
+            { id: 'not_contains', value: 'not_contains', name: 'Not Contains', label: 'Not Contains' },
+            { id: 'greater_than', value: 'greater_than', name: 'Greater Than', label: 'Greater Than' },
+            { id: 'less_than', value: 'less_than', name: 'Less Than', label: 'Less Than' },
+            { id: 'greater_than_or_equals', value: 'greater_than_or_equals', name: 'Greater Than Or Equals', label: 'Greater Than Or Equals' },
+            { id: 'less_than_or_equals', value: 'less_than_or_equals', name: 'Less Than Or Equals', label: 'Less Than Or Equals' },
+            { id: 'exists', value: 'exists', name: 'Exists', label: 'Exists' },
+            { id: 'not_exists', value: 'not_exists', name: 'Not Exists', label: 'Not Exists' }
+        ];
+    }
+    getExpectedTypeOptions() {
+        return [
+            { id: 'string', value: 'string', name: 'String', label: 'String' },
+            { id: 'number', value: 'number', name: 'Number', label: 'Number' },
+            { id: 'boolean', value: 'boolean', name: 'Boolean', label: 'Boolean' },
+            { id: 'object', value: 'object', name: 'Object', label: 'Object' },
+            { id: 'array', value: 'array', name: 'Array', label: 'Array' },
+            { id: 'null', value: 'null', name: 'Null', label: 'Null' }
+        ];
+    }
+    getVerificationTypeConfig(index) {
+        // Cache the config to prevent infinite change detection loops
+        if (!this.verificationTypeConfigCache) {
+            this.verificationTypeConfigCache = {
+                key: 'verificationType',
+                placeholder: 'Select verification type',
+                multiple: false,
+                searchable: false,
+                options: this.getVerificationTypeOptions()
+            };
+        }
+        return this.verificationTypeConfigCache;
+    }
+    getExpectedTypeConfig(index) {
+        // Cache the config to prevent infinite change detection loops
+        if (!this.expectedTypeConfigCache) {
+            this.expectedTypeConfigCache = {
+                key: 'expectedType',
+                placeholder: 'Select expected type',
+                multiple: false,
+                searchable: false,
+                options: this.getExpectedTypeOptions()
+            };
+        }
+        return this.expectedTypeConfigCache;
+    }
+    getResultClass(result) {
+        if (result === 'Pass') {
+            return 'cqa-bg-green-500 cqa-text-white';
+        }
+        else if (result === 'Fail') {
+            return 'cqa-bg-red-500 cqa-text-white';
+        }
+        return 'cqa-bg-gray-300 cqa-text-gray-700';
+    }
+    get allValidationRulesSelected() {
+        return this.validationFormArray.length > 0 &&
+            this.validationFormArray.controls.every(control => control.get('checked')?.value);
+    }
+    get someValidationRulesSelected() {
+        return this.validationFormArray.controls.some(control => control.get('checked')?.value) &&
+            !this.allValidationRulesSelected;
+    }
+    onSelectAllValidationRules(checked) {
+        this.validationFormArray.controls.forEach(control => {
+            control.get('checked')?.setValue(checked);
+        });
+    }
+    onDeleteSelectedValidationRules() {
+        const indicesToRemove = [];
+        this.validationFormArray.controls.forEach((control, index) => {
+            if (control.get('checked')?.value) {
+                indicesToRemove.push(index);
+            }
+        });
+        // Remove in reverse order to maintain correct indices
+        indicesToRemove.reverse().forEach(index => {
+            this.removeValidationRule(index);
+        });
+    }
+}
+StepBuilderApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderApiComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StepBuilderApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderApiComponent, selector: "cqa-step-builder-api", inputs: { httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions", currentStep: "currentStep", responsePreview: "responsePreview", isLoading: "isLoading", initialData: "initialData" }, outputs: { createStep: "createStep", cancelled: "cancelled", sendRequest: "sendRequest", importCurl: "importCurl" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create API Test Step\n  </h2>\n\n  <!-- Progress Tracker -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-mb-6 cqa-pb-4 cqa-border-b cqa-border-gray-200\">\n    <!-- <div *ngFor=\"let step of progressSteps\"\n         class=\"cqa-flex cqa-items-center cqa-gap-2\"\n         [ngClass]=\"getProgressStepClass(step)\">\n      <span class=\"cqa-text-sm cqa-font-medium\">{{ getProgressStepNumber(step) }} {{ getProgressStepLabel(step) }}</span>\n      <span *ngIf=\"step !== 'validation'\" class=\"cqa-text-gray-300\">\u2022</span>\n    </div> -->\n    <div\n         class=\"cqa-flex cqa-items-center cqa-gap-2\">\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'request-details'}\" (click)=\"onProgressStepChange('request-details')\">\n          <div>1</div>\n          <div>Request Details</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'store-response'}\" (click)=\"onProgressStepChange('store-response')\">\n          <div>2</div>\n          <div>Store Response</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'validation'}\" (click)=\"onProgressStepChange('validation')\">\n          <div>3</div>\n          <div>Validation</div>\n          <div></div>\n         </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"selectedProgressStep === 'request-details'\">\n  <!-- API Request Configuration -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-6\">\n    <div class=\"cqa-w-32 cqa-flex-shrink-0\">\n      <cqa-dynamic-select\n        [form]=\"apiForm\"\n        [config]=\"getHttpMethodConfig()\">\n      </cqa-dynamic-select>\n    </div>\n    <div class=\"cqa-flex-1\">\n      <cqa-custom-input\n        [placeholder]=\"'Enter API endpoint URL'\"\n        [value]=\"apiForm.get('url')?.value || ''\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"apiForm.get('url')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    <cqa-button\n      variant=\"outlined\"\n      text=\"Import API cURL\"\n      (clicked)=\"onImportCurl()\">\n    </cqa-button>\n    <cqa-button\n      variant=\"filled\"\n      text=\"Send Request\"\n      (clicked)=\"onSendRequest()\"\n      [disabled]=\"!apiForm.get('url')?.value || isLoading\">\n    </cqa-button>\n  </div>\n\n  <!-- Request Details Tabs -->\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Tab Navigation -->\n    <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'headers'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'headers'\"\n        (click)=\"onTabChange('headers')\">\n        Headers\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'body'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'body'\"\n        (click)=\"onTabChange('body')\">\n        Body\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'params'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'params'\"\n        (click)=\"onTabChange('params')\">\n        Params\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'scripts'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'scripts'\"\n        (click)=\"onTabChange('scripts')\">\n        Scripts\n      </button>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-border cqa-border-gray-200 cqa-border-t-0 cqa-rounded-b-lg\">\n      <!-- Headers Tab -->\n      <div *ngIf=\"selectedTab === 'headers'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Name</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Value</div>\n        </div>\n        <div *ngFor=\"let header of headersFormArray.controls; let i = index; trackBy: trackByHeaderIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getHeaderFormGroup(i)\"\n              [config]=\"getHeaderNameConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Header value'\"\n                [value]=\"getHeaderFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getHeaderFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeHeader(i)\"\n              [attr.aria-label]=\"'Remove header'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addHeader()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Header</span>\n        </button>\n      </div>\n\n      <!-- Body Tab -->\n      <div *ngIf=\"selectedTab === 'body'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter request body (JSON, XML, etc.)'\"\n          [value]=\"apiForm.get('body')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('body')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n\n      <!-- Params Tab -->\n      <div *ngIf=\"selectedTab === 'params'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Name</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Value</div>\n        </div>\n        <div *ngFor=\"let param of paramsFormArray.controls; let i = index; trackBy: trackByParamIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'Parameter name'\"\n              [value]=\"getParamFormGroup(i).get('name')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getParamFormGroup(i).get('name')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Parameter value'\"\n                [value]=\"getParamFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getParamFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeParam(i)\"\n              [attr.aria-label]=\"'Remove parameter'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addParam()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Parameter</span>\n        </button>\n      </div>\n\n      <!-- Scripts Tab -->\n      <div *ngIf=\"selectedTab === 'scripts'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter scripts (JavaScript, etc.)'\"\n          [value]=\"apiForm.get('scripts')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('scripts')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n    </div>\n  </div>\n\n\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'store-response'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Store Response Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Store Response\n    </h3>\n\n    <!-- Variable Name Input -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        Variable Name\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Variable Name'\"\n        [value]=\"apiForm.get('variableName')?.value || ''\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"apiForm.get('variableName')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'validation'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Validation Rules Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Validation Rules\n    </h3>\n\n    <!-- Validation Rules Table -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-4\">\n      <!-- Table Header -->\n      <div class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200 cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center\">\n          <mat-checkbox\n            [checked]=\"allValidationRulesSelected\"\n            [indeterminate]=\"someValidationRulesSelected\"\n            (change)=\"onSelectAllValidationRules($event.checked)\">\n          </mat-checkbox>\n        </div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">jsonPath</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">verificationType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedValue</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Result</div>\n      </div>\n\n      <!-- Table Body -->\n      <div class=\"cqa-flex cqa-flex-col\">\n        <div *ngFor=\"let validationRule of validationFormArray.controls; let i = index; trackBy: trackByValidationRuleIndex\" \n             [formGroup]=\"getValidationFormGroup(i)\"\n             class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-border-b cqa-border-gray-200 cqa-items-center cqa-last:border-b-0\">\n          <!-- Checkbox -->\n          <div class=\"cqa-flex cqa-items-center\">\n            <mat-checkbox formControlName=\"checked\">\n            </mat-checkbox>\n          </div>\n\n          <!-- jsonPath -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'jsonPath'\"\n              [value]=\"getValidationFormGroup(i).get('jsonPath')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('jsonPath')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- verificationType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getVerificationTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getExpectedTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedValue -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'expectedValue'\"\n              [value]=\"getValidationFormGroup(i).get('expectedValue')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('expectedValue')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Result and Delete -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <button\n              type=\"button\"\n              class=\"cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-font-medium\"\n              [ngClass]=\"getResultClass(getValidationFormGroup(i).get('result')?.value || 'Not run')\">\n              {{ getValidationFormGroup(i).get('result')?.value || 'Not run' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeValidationRule(i)\"\n              [attr.aria-label]=\"'Delete validation rule'\">\n              <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Add Another Rule and Delete Selected -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-mb-4\">\n      <button\n        *ngIf=\"someValidationRulesSelected || allValidationRulesSelected\"\n        type=\"button\"\n        class=\"cqa-text-red-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-red-700 cqa-transition-colors\"\n        (click)=\"onDeleteSelectedValidationRules()\">\n        <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n        <span>Delete Selected</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n        (click)=\"addValidationRule()\">\n        <mat-icon class=\"cqa-text-base\">add</mat-icon>\n        <span>Add Another</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n\n\n  <!-- Response Preview Section -->\n  <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n    <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n      <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Response Preview</h3>\n    </div>\n    <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-overflow-auto\" style=\"max-height: 300px;\">\n      <pre *ngIf=\"responsePreview\" class=\"cqa-text-xs cqa-font-mono cqa-text-gray-800 cqa-whitespace-pre-wrap\">{{ formatJsonResponse(responsePreview) }}</pre>\n      <p *ngIf=\"!responsePreview\" class=\"cqa-text-sm cqa-text-gray-400 cqa-text-center cqa-py-8\">\n        No response yet. Send a request to see the response preview.\n      </p>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <!-- Cancel button (only on first step) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep === 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <!-- Back button (on all steps except first) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep !== 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Back\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onBack()\">\n    </cqa-button>\n    <!-- Next/Create Step button -->\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isLastStep() ? 'Create Step' : 'Next'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"isLastStep() ? onCreateStep() : onNext()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { 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"] }, { 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: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle", "customClass"], outputs: ["valueChange", "blurred", "focused"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderApiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-step-builder-api', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create API Test Step\n  </h2>\n\n  <!-- Progress Tracker -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-mb-6 cqa-pb-4 cqa-border-b cqa-border-gray-200\">\n    <!-- <div *ngFor=\"let step of progressSteps\"\n         class=\"cqa-flex cqa-items-center cqa-gap-2\"\n         [ngClass]=\"getProgressStepClass(step)\">\n      <span class=\"cqa-text-sm cqa-font-medium\">{{ getProgressStepNumber(step) }} {{ getProgressStepLabel(step) }}</span>\n      <span *ngIf=\"step !== 'validation'\" class=\"cqa-text-gray-300\">\u2022</span>\n    </div> -->\n    <div\n         class=\"cqa-flex cqa-items-center cqa-gap-2\">\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'request-details'}\" (click)=\"onProgressStepChange('request-details')\">\n          <div>1</div>\n          <div>Request Details</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'store-response'}\" (click)=\"onProgressStepChange('store-response')\">\n          <div>2</div>\n          <div>Store Response</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'validation'}\" (click)=\"onProgressStepChange('validation')\">\n          <div>3</div>\n          <div>Validation</div>\n          <div></div>\n         </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"selectedProgressStep === 'request-details'\">\n  <!-- API Request Configuration -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-6\">\n    <div class=\"cqa-w-32 cqa-flex-shrink-0\">\n      <cqa-dynamic-select\n        [form]=\"apiForm\"\n        [config]=\"getHttpMethodConfig()\">\n      </cqa-dynamic-select>\n    </div>\n    <div class=\"cqa-flex-1\">\n      <cqa-custom-input\n        [placeholder]=\"'Enter API endpoint URL'\"\n        [value]=\"apiForm.get('url')?.value || ''\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"apiForm.get('url')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    <cqa-button\n      variant=\"outlined\"\n      text=\"Import API cURL\"\n      (clicked)=\"onImportCurl()\">\n    </cqa-button>\n    <cqa-button\n      variant=\"filled\"\n      text=\"Send Request\"\n      (clicked)=\"onSendRequest()\"\n      [disabled]=\"!apiForm.get('url')?.value || isLoading\">\n    </cqa-button>\n  </div>\n\n  <!-- Request Details Tabs -->\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Tab Navigation -->\n    <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'headers'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'headers'\"\n        (click)=\"onTabChange('headers')\">\n        Headers\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'body'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'body'\"\n        (click)=\"onTabChange('body')\">\n        Body\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'params'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'params'\"\n        (click)=\"onTabChange('params')\">\n        Params\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'scripts'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'scripts'\"\n        (click)=\"onTabChange('scripts')\">\n        Scripts\n      </button>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-border cqa-border-gray-200 cqa-border-t-0 cqa-rounded-b-lg\">\n      <!-- Headers Tab -->\n      <div *ngIf=\"selectedTab === 'headers'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Name</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Value</div>\n        </div>\n        <div *ngFor=\"let header of headersFormArray.controls; let i = index; trackBy: trackByHeaderIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getHeaderFormGroup(i)\"\n              [config]=\"getHeaderNameConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Header value'\"\n                [value]=\"getHeaderFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getHeaderFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeHeader(i)\"\n              [attr.aria-label]=\"'Remove header'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addHeader()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Header</span>\n        </button>\n      </div>\n\n      <!-- Body Tab -->\n      <div *ngIf=\"selectedTab === 'body'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter request body (JSON, XML, etc.)'\"\n          [value]=\"apiForm.get('body')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('body')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n\n      <!-- Params Tab -->\n      <div *ngIf=\"selectedTab === 'params'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Name</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Value</div>\n        </div>\n        <div *ngFor=\"let param of paramsFormArray.controls; let i = index; trackBy: trackByParamIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'Parameter name'\"\n              [value]=\"getParamFormGroup(i).get('name')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getParamFormGroup(i).get('name')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Parameter value'\"\n                [value]=\"getParamFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getParamFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeParam(i)\"\n              [attr.aria-label]=\"'Remove parameter'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addParam()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Parameter</span>\n        </button>\n      </div>\n\n      <!-- Scripts Tab -->\n      <div *ngIf=\"selectedTab === 'scripts'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter scripts (JavaScript, etc.)'\"\n          [value]=\"apiForm.get('scripts')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('scripts')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n    </div>\n  </div>\n\n\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'store-response'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Store Response Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Store Response\n    </h3>\n\n    <!-- Variable Name Input -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        Variable Name\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Variable Name'\"\n        [value]=\"apiForm.get('variableName')?.value || ''\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"apiForm.get('variableName')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'validation'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Validation Rules Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Validation Rules\n    </h3>\n\n    <!-- Validation Rules Table -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-4\">\n      <!-- Table Header -->\n      <div class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200 cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center\">\n          <mat-checkbox\n            [checked]=\"allValidationRulesSelected\"\n            [indeterminate]=\"someValidationRulesSelected\"\n            (change)=\"onSelectAllValidationRules($event.checked)\">\n          </mat-checkbox>\n        </div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">jsonPath</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">verificationType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedValue</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Result</div>\n      </div>\n\n      <!-- Table Body -->\n      <div class=\"cqa-flex cqa-flex-col\">\n        <div *ngFor=\"let validationRule of validationFormArray.controls; let i = index; trackBy: trackByValidationRuleIndex\" \n             [formGroup]=\"getValidationFormGroup(i)\"\n             class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-border-b cqa-border-gray-200 cqa-items-center cqa-last:border-b-0\">\n          <!-- Checkbox -->\n          <div class=\"cqa-flex cqa-items-center\">\n            <mat-checkbox formControlName=\"checked\">\n            </mat-checkbox>\n          </div>\n\n          <!-- jsonPath -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'jsonPath'\"\n              [value]=\"getValidationFormGroup(i).get('jsonPath')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('jsonPath')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- verificationType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getVerificationTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getExpectedTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedValue -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'expectedValue'\"\n              [value]=\"getValidationFormGroup(i).get('expectedValue')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('expectedValue')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Result and Delete -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <button\n              type=\"button\"\n              class=\"cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-font-medium\"\n              [ngClass]=\"getResultClass(getValidationFormGroup(i).get('result')?.value || 'Not run')\">\n              {{ getValidationFormGroup(i).get('result')?.value || 'Not run' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeValidationRule(i)\"\n              [attr.aria-label]=\"'Delete validation rule'\">\n              <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Add Another Rule and Delete Selected -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-mb-4\">\n      <button\n        *ngIf=\"someValidationRulesSelected || allValidationRulesSelected\"\n        type=\"button\"\n        class=\"cqa-text-red-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-red-700 cqa-transition-colors\"\n        (click)=\"onDeleteSelectedValidationRules()\">\n        <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n        <span>Delete Selected</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n        (click)=\"addValidationRule()\">\n        <mat-icon class=\"cqa-text-base\">add</mat-icon>\n        <span>Add Another</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n\n\n  <!-- Response Preview Section -->\n  <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n    <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n      <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Response Preview</h3>\n    </div>\n    <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-overflow-auto\" style=\"max-height: 300px;\">\n      <pre *ngIf=\"responsePreview\" class=\"cqa-text-xs cqa-font-mono cqa-text-gray-800 cqa-whitespace-pre-wrap\">{{ formatJsonResponse(responsePreview) }}</pre>\n      <p *ngIf=\"!responsePreview\" class=\"cqa-text-sm cqa-text-gray-400 cqa-text-center cqa-py-8\">\n        No response yet. Send a request to see the response preview.\n      </p>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <!-- Cancel button (only on first step) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep === 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <!-- Back button (on all steps except first) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep !== 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Back\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onBack()\">\n    </cqa-button>\n    <!-- Next/Create Step button -->\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isLastStep() ? 'Create Step' : 'Next'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"isLastStep() ? onCreateStep() : onNext()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { httpMethodOptions: [{
+                type: Input
+            }], headerNameOptions: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], responsePreview: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], initialData: [{
+                type: Input
+            }], createStep: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], sendRequest: [{
+                type: Output
+            }], importCurl: [{
+                type: Output
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -21178,6 +21824,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         CustomEditStepComponent,
         ItemListComponent,
         TestDataModalComponent,
+        CreateStepGroupComponent,
+        DeleteStepsComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
         StepBuilderLoopComponent,
@@ -21189,7 +21837,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderRecordStepComponent,
         StepBuilderDocumentGenerationTemplateStepComponent,
         ElementListComponent,
-        StepBuilderDocumentComponent], imports: [CommonModule,
+        StepBuilderDocumentComponent,
+        StepBuilderApiComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatIconModule,
@@ -21299,6 +21948,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         CustomEditStepComponent,
         ItemListComponent,
         TestDataModalComponent,
+        CreateStepGroupComponent,
+        DeleteStepsComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
         StepBuilderLoopComponent,
@@ -21309,6 +21960,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderCustomCodeComponent,
         StepBuilderRecordStepComponent,
         StepBuilderDocumentGenerationTemplateStepComponent,
+        StepBuilderApiComponent,
         ElementListComponent,
         StepBuilderDocumentComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
@@ -21469,6 +22121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         CustomEditStepComponent,
                         ItemListComponent,
                         TestDataModalComponent,
+                        CreateStepGroupComponent,
+                        DeleteStepsComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
@@ -21481,6 +22135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderDocumentGenerationTemplateStepComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
+                        StepBuilderApiComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -21596,6 +22251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         CustomEditStepComponent,
                         ItemListComponent,
                         TestDataModalComponent,
+                        CreateStepGroupComponent,
+                        DeleteStepsComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
@@ -21606,6 +22263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderCustomCodeComponent,
                         StepBuilderRecordStepComponent,
                         StepBuilderDocumentGenerationTemplateStepComponent,
+                        StepBuilderApiComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
                     ],
@@ -21786,5 +22444,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, 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, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, 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, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
+export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, 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, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, 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, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderApiComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map