npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.187 → 1.1.189 - Mend

@cqa-lib/cqa-ui 1.1.187 → 1.1.189

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

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

@@ -1721,6 +1721,7 @@ class DynamicSelectFieldComponent {
             throw new Error('cqa-dynamic-select: input "config.key" is required.');
         }
         this.applySelectedValueIfNeeded();
+        this.syncDisabledState();
         this.lastOptionsLength = (((_a = this.config) === null || _a === void 0 ? void 0 : _a.options) || []).length;
     }
     get displayPlaceholder() {
@@ -1733,6 +1734,9 @@ class DynamicSelectFieldComponent {
     }
     ngOnChanges(changes) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if ('config' in changes || 'form' in changes) {
+            this.syncDisabledState();
+        }
         if ('config' in changes) {
             // When config changes (including toggling multiple), ensure control value shape matches
             this.syncControlValueForMultipleMode();
@@ -1829,6 +1833,27 @@ class DynamicSelectFieldComponent {
         }
         return !!value;
     }
+    /**
+     * Sync the form control's disabled state from config.
+     * Use the FormControl API instead of [disabled] in the template to avoid Angular's
+     * "changed after checked" / reactive forms disabled-attribute warning.
+     */
+    syncDisabledState() {
+        var _a, _b;
+        const key = (_a = this.config) === null || _a === void 0 ? void 0 : _a.key;
+        if (!key || !this.form)
+            return;
+        const control = this.form.get(key);
+        if (!control)
+            return;
+        const shouldDisable = this.toBoolean((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled);
+        if (shouldDisable) {
+            control.disable({ emitEvent: false });
+        }
+        else {
+            control.enable({ emitEvent: false });
+        }
+    }
     syncControlValueForMultipleMode() {
         var _a;
         const key = (_a = this.config) === null || _a === void 0 ? void 0 : _a.key;
@@ -2258,10 +2283,10 @@ class DynamicSelectFieldComponent {
     }
 }
 DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
+            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
         }], propDecorators: { form: [{
                 type: Input
             }], config: [{
@@ -5865,7 +5890,8 @@ class TailwindOverlayContainer extends OverlayContainer {
                 pane.classList.contains('ctc-date-range-panel') ||
                 pane.classList.contains('visual-difference-dialog') ||
                 pane.classList.contains('cqa-custom-edit-step-panel') ||
-                pane.classList.contains('cqa-test-data-modal-panel');
+                pane.classList.contains('cqa-test-data-modal-panel') ||
+                pane.classList.contains('cqa-step-details-drawer-panel');
             // Also check for library components inside the pane
             // These classes may be on child elements rather than the pane itself
             const hasLibraryDialogInside = pane.querySelector('.cqa-dialog-panel') !== null;
@@ -5878,10 +5904,12 @@ class TailwindOverlayContainer extends OverlayContainer {
                 pane.querySelector('cqa-custom-edit-step') !== null;
             const hasTestDataModalInside = pane.querySelector('.cqa-test-data-modal-panel') !== null ||
                 pane.querySelector('cqa-test-data-modal') !== null;
+            const hasStepDetailsDrawerInside = pane.querySelector('.cqa-step-details-drawer-panel') !== null ||
+                pane.querySelector('cqa-step-details-drawer') !== null;
             const isLibraryOverlay = paneHasLibraryClass || hasLibraryDialogInside ||
                 hasLibrarySelectInside || hasLibraryDatePickerInside ||
                 hasVisualDifferenceDialogInside || hasCustomEditStepInside ||
-                hasTestDataModalInside;
+                hasTestDataModalInside || hasStepDetailsDrawerInside;
             if (isLibraryOverlay) {
                 // This is a library overlay - add the class
                 pane.classList.add('cqa-ui-root');
@@ -16864,10 +16892,35 @@ class TestCaseNormalStepComponent {
         return this.eventTypeConfigs.find(etc => etc.type === this.eventType) || this.eventTypeConfigs[0];
     }
     getActionDescription() {
-        if (this.action) {
-            return this.action ? this.sanitizer.bypassSecurityTrustHtml(this.action) : '';
+        const config = this.getCurrentEventTypeConfig();
+        switch (this.eventType) {
+            case 'navigate':
+                return 'Navigate to';
+            case 'type':
+                return 'Type';
+            case 'click':
+                return 'Click on';
+            case 'doubleClick':
+                return 'Double click on';
+            case 'pressEnter':
+                return 'Press Enter on';
+            case 'enter':
+                return 'Enter';
+            case 'wait':
+                return 'Wait';
+            case 'verify':
+                return 'Verify';
+            case 'custom':
+                return 'Custom step';
+            case 'ai-agent':
+                return 'AI Agent';
+            default:
+                return '';
         }
-        return '';
+        // if (this.action) {
+        //   return this.action ? this.sanitizer.bypassSecurityTrustHtml(this.action) as string : '';
+        // }
+        // return '';
     }
     getActionSuffix() {
         switch (this.eventType) {
@@ -17105,10 +17158,10 @@ class TestCaseNormalStepComponent {
     }
 }
 TestCaseNormalStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, deps: [{ token: CustomEditStepService }, { token: ElementPopupService }, { token: TestDataModalService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", selectionChange: "selectionChange", clickAction: "clickAction" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "testDataTrigger", first: true, predicate: ["testDataTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }, { propertyName: "elementTrigger", first: true, predicate: ["elementTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\"\n   [innerHTML]=\"getActionDescription()\" (click)=\"clickOnAction($event)\">\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", selectionChange: "selectionChange", clickAction: "clickAction" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "testDataTrigger", first: true, predicate: ["testDataTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }, { propertyName: "elementTrigger", first: true, predicate: ["elementTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\"\n   [innerHTML]=\"getActionDescription()\" (click)=\"clickOnAction($event)\">\n  </span> -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\"\n   [innerHTML]=\"getActionDescription()\" (click)=\"clickOnAction($event)\">\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\"\n   [innerHTML]=\"getActionDescription()\" (click)=\"clickOnAction($event)\">\n  </span> -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CustomEditStepService }, { type: ElementPopupService }, { type: TestDataModalService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.DomSanitizer }]; }, propDecorators: { dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdownContainer', { static: false }]
@@ -22043,6 +22096,506 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
+/**
+ * Configuration for Step Details Drawer (Edit In Depth).
+ * Form is fully dynamic by Step Type – no hardcoded field lists.
+ */
+/**
+ * Resolves drawer step type from a test case step config.
+ */
+function getStepDetailsStepType(step) {
+    if (!step)
+        return null;
+    if (isApiStepConfig(step))
+        return 'api';
+    if (isAiAgentStepConfig(step))
+        return 'aiAgent';
+    if (isNormalStepConfig(step) && step.eventType === 'custom')
+        return 'custom';
+    return null;
+}
+/**
+ * Fields shown per step type (configuration-based).
+ * Custom: Description, Metadata, Retry Count (if configured), Advanced (if configured).
+ * API: Method, URL, Headers, Body, Save Output as Variable, Advanced (if configured).
+ * AI Agent: Agent Task, Type, Metadata, Environment, Description, Constraints (toggles + Max Retries), Advanced (toggles + Retry Count, Iframe locator, Other Locators).
+ */
+const STEP_DETAILS_FIELDS_BY_TYPE = {
+    custom: ['description', 'metadata', 'retryCount', 'advanced'],
+    api: ['method', 'url', 'headers', 'body', 'saveOutputAsVariable', 'advanced'],
+    aiAgent: [
+        'agentTask',
+        'type',
+        'metadata',
+        'environment',
+        'description',
+        'onlyUseAttachedContext',
+        'takeScreenshotsWhenVerifying',
+        'maxRetries',
+        'advanced',
+        'retryCount',
+        'iframeLocator',
+        'otherLocators',
+    ],
+};
+const STEP_DETAILS_FIELD_META = {
+    description: { key: 'description', label: 'Description', placeholder: 'Text Input', controlType: 'text', section: 'main' },
+    metadata: { key: 'metadata', label: 'Metadata', placeholder: 'Text Input', controlType: 'text', section: 'main' },
+    retryCount: {
+        key: 'retryCount',
+        label: 'Retry Count',
+        placeholder: 'Dynamic search selector from library or manual',
+        controlType: 'dropdown',
+        section: 'advanced',
+        options: [
+            { value: '0', label: '0' },
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+            { value: '3', label: '3' },
+        ],
+    },
+    advanced: { key: 'advanced', label: 'Advanced', controlType: 'toggleGroup' },
+    method: {
+        key: 'method',
+        label: 'Method',
+        placeholder: 'Method',
+        controlType: 'dropdown',
+        section: 'main',
+        options: [
+            { value: 'GET', label: 'GET' },
+            { value: 'POST', label: 'POST' },
+            { value: 'PUT', label: 'PUT' },
+            { value: 'DELETE', label: 'DELETE' },
+            { value: 'PATCH', label: 'PATCH' },
+        ],
+    },
+    url: { key: 'url', label: 'URL', placeholder: 'URL', controlType: 'text', section: 'main' },
+    headers: { key: 'headers', label: 'Headers', controlType: 'text', section: 'main' },
+    body: { key: 'body', label: 'Body', placeholder: 'Request body', controlType: 'code', section: 'main' },
+    saveOutputAsVariable: {
+        key: 'saveOutputAsVariable',
+        label: 'Save Output as Variable',
+        placeholder: 'Variable name',
+        controlType: 'text',
+        section: 'main',
+    },
+    agentTask: {
+        key: 'agentTask',
+        label: 'Agent Task',
+        placeholder: 'What should the agent achieve?',
+        controlType: 'textarea',
+        section: 'main',
+        required: true,
+        rows: 4,
+        tip: 'Tip: Use numbered steps or bullet points for complex tasks.',
+    },
+    type: {
+        key: 'type',
+        label: 'Type',
+        placeholder: 'Type',
+        controlType: 'dropdown',
+        section: 'main',
+        options: [
+            { value: 'default', label: 'Default' },
+            { value: 'browser', label: 'Browser' },
+        ],
+    },
+    environment: {
+        key: 'environment',
+        label: 'Environment',
+        placeholder: 'Environment',
+        controlType: 'dropdown',
+        section: 'main',
+        options: [
+            { value: 'default', label: 'Default' },
+            { value: 'staging', label: 'Staging' },
+            { value: 'prod', label: 'Production' },
+        ],
+    },
+    maxRetries: {
+        key: 'maxRetries',
+        label: 'Max Retries',
+        placeholder: '3 retries (recommended)',
+        controlType: 'dropdown',
+        section: 'constraints',
+        options: [
+            { value: '0', label: '0' },
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+            { value: '3', label: '3 retries (recommended)' },
+        ],
+    },
+    onlyUseAttachedContext: {
+        key: 'onlyUseAttachedContext',
+        label: 'Use existing elements only',
+        subLabel: 'Only use elements from the attached context',
+        controlType: 'toggle',
+        section: 'constraints',
+    },
+    takeScreenshotsWhenVerifying: {
+        key: 'takeScreenshotsWhenVerifying',
+        label: 'Capture evidence',
+        subLabel: 'Take screenshots when verifying conditions',
+        controlType: 'toggle',
+        section: 'constraints',
+    },
+    iframeLocator: {
+        key: 'iframeLocator',
+        label: 'Iframe locator',
+        placeholder: 'Dynamic search selector from library or manual',
+        controlType: 'dropdown',
+        section: 'advanced',
+        options: [
+            { value: 'manual', label: 'Dynamic search selector from library or manual' },
+        ],
+    },
+    otherLocators: {
+        key: 'otherLocators',
+        label: 'Other Locators',
+        placeholder: 'Dynamic search selector from library or manual',
+        controlType: 'dropdown',
+        section: 'advanced',
+        options: [
+            { value: 'manual', label: 'Dynamic search selector from library or manual' },
+        ],
+    },
+    continueOnError: {
+        key: 'continueOnError',
+        label: 'Continue on Error',
+        subLabel: "Don't fail the test if this step fails.",
+        controlType: 'toggle',
+        section: 'advanced',
+    },
+    disabled: {
+        key: 'disabled',
+        label: 'Disabled',
+        subLabel: 'Skip this step during execution.',
+        controlType: 'toggle',
+        section: 'advanced',
+    },
+};
+/** Toggle fields always shown inside the Advanced section. */
+const ADVANCED_TOGGLE_KEYS = ['continueOnError', 'disabled'];
+/** Field keys shown inside Advanced (per step type), in addition to ADVANCED_TOGGLE_KEYS. */
+const ADVANCED_SUBFIELDS_BY_TYPE = {
+    custom: [],
+    api: [],
+    aiAgent: ['retryCount', 'iframeLocator', 'otherLocators'],
+};
+class StepDetailsDrawerRef {
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+        this.closed$ = new Subject();
+        this.isClosed = false;
+        this.overlayRef.detachments().subscribe(() => this.finishClose(undefined));
+    }
+    close(result) {
+        if (this.isClosed)
+            return;
+        this.finishClose(result);
+        this.overlayRef.dispose();
+    }
+    afterClosed() {
+        return this.closed$.asObservable();
+    }
+    finishClose(result) {
+        if (this.isClosed)
+            return;
+        this.isClosed = true;
+        this.closed$.next(result);
+        this.closed$.complete();
+    }
+}
+const STEP_DETAILS_DRAWER_REF = new InjectionToken('STEP_DETAILS_DRAWER_REF');
+const STEP_DETAILS_DRAWER_DATA = new InjectionToken('STEP_DETAILS_DRAWER_DATA');
+/**
+ * Step Details Drawer (Edit In Depth).
+ * Single reusable component; form is dynamic by Step Type via configuration.
+ * No Priority section. Uses CQA components only.
+ */
+class StepDetailsDrawerComponent {
+    constructor(ref, fb, cdr, data) {
+        var _a, _b;
+        this.ref = ref;
+        this.fb = fb;
+        this.cdr = cdr;
+        this.saveChanges = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.saveAsTemplate = new EventEmitter();
+        /** Optional: when provided (e.g. from Storybook Controls), use instead of STEP_DETAILS_DRAWER_DATA. */
+        this.stepData = null;
+        this.stepNumberInput = null;
+        this.stepType = null;
+        this.visibleFields = [];
+        this.fieldMeta = STEP_DETAILS_FIELD_META;
+        this.advancedToggleKeys = ADVANCED_TOGGLE_KEYS;
+        this.advancedExpanded = false;
+        this.agentTaskExpanded = true;
+        /** Cached select configs (stable references per key) to avoid infinite change detection in template. */
+        this.selectConfigMap = this.buildSelectConfigMap();
+        this.step = (_a = data === null || data === void 0 ? void 0 : data.step) !== null && _a !== void 0 ? _a : {};
+        this.stepNumber = (_b = data === null || data === void 0 ? void 0 : data.stepNumber) !== null && _b !== void 0 ? _b : 1;
+        this.form = this.fb.group({});
+        this.syncStepTypeAndForm();
+    }
+    /** Subfields to show inside Advanced section for current step type. */
+    get advancedSubfields() {
+        return this.stepType ? ADVANCED_SUBFIELDS_BY_TYPE[this.stepType] : [];
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (this.stepData != null) {
+            this.step = this.stepData;
+            this.stepNumber = (_b = (_a = this.stepNumberInput) !== null && _a !== void 0 ? _a : this.stepData.stepNumber) !== null && _b !== void 0 ? _b : 1;
+            this.syncStepTypeAndForm();
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (changes['stepData'] || changes['stepNumberInput']) {
+            if (this.stepData != null) {
+                this.step = this.stepData;
+                this.stepNumber = (_b = (_a = this.stepNumberInput) !== null && _a !== void 0 ? _a : this.stepData.stepNumber) !== null && _b !== void 0 ? _b : 1;
+            }
+            this.syncStepTypeAndForm();
+            this.cdr.detectChanges();
+        }
+    }
+    syncStepTypeAndForm() {
+        this.stepType = getStepDetailsStepType(this.step);
+        this.visibleFields = this.stepType ? STEP_DETAILS_FIELDS_BY_TYPE[this.stepType] : [];
+        this.buildFormFromStep();
+    }
+    buildFormFromStep() {
+        const group = {};
+        for (const key of this.visibleFields) {
+            if (key === 'advanced')
+                continue;
+            group[key] = [this.getStepValue(key)];
+        }
+        for (const key of ADVANCED_TOGGLE_KEYS) {
+            if (!(key in group))
+                group[key] = [this.getStepValue(key)];
+        }
+        this.form = this.fb.group(group);
+    }
+    getStepValue(key) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const step = this.step;
+        if (isNormalStepConfig(this.step) && this.step.eventType === 'custom') {
+            if (key === 'description') {
+                const params = this.step.parameters;
+                return (_c = (_b = (_a = params === null || params === void 0 ? void 0 : params[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.step.description) !== null && _c !== void 0 ? _c : '';
+            }
+            if (key === 'metadata') {
+                const params = this.step.parameters;
+                return (_e = (_d = params === null || params === void 0 ? void 0 : params[1]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '';
+            }
+        }
+        if (isApiStepConfig(this.step)) {
+            const api = this.step;
+            if (key === 'method')
+                return (_f = api.method) !== null && _f !== void 0 ? _f : 'GET';
+            if (key === 'url')
+                return api.baseUrl ? `${api.baseUrl}${api.endpoint || ''}` : (_g = api.endpoint) !== null && _g !== void 0 ? _g : '';
+            if (key === 'headers')
+                return api.headers ? JSON.stringify(api.headers, null, 2) : '';
+            if (key === 'body')
+                return (_h = api.requestBody) !== null && _h !== void 0 ? _h : '';
+            if (key === 'saveOutputAsVariable')
+                return (_j = api.saveTo) !== null && _j !== void 0 ? _j : '';
+        }
+        if (isAiAgentStepConfig(this.step)) {
+            const ai = this.step;
+            if (key === 'agentTask')
+                return (_k = ai.instructions) !== null && _k !== void 0 ? _k : '';
+            if (key === 'description')
+                return (_l = ai.description) !== null && _l !== void 0 ? _l : '';
+            if (key === 'metadata')
+                return (_m = step.metadata) !== null && _m !== void 0 ? _m : '';
+        }
+        if (key === 'onlyUseAttachedContext' ||
+            key === 'takeScreenshotsWhenVerifying' ||
+            key === 'continueOnError' ||
+            key === 'disabled') {
+            return step[key] === true;
+        }
+        return (_o = step[key]) !== null && _o !== void 0 ? _o : '';
+    }
+    setStepValue(key, value) {
+        const step = this.step;
+        if (isNormalStepConfig(this.step) && this.step.eventType === 'custom') {
+            if (key === 'description') {
+                const params = this.step.parameters;
+                if (params === null || params === void 0 ? void 0 : params[0])
+                    params[0].value = String(value);
+                else
+                    this.step.description = String(value);
+                return;
+            }
+            if (key === 'metadata') {
+                const params = this.step.parameters;
+                if (params === null || params === void 0 ? void 0 : params[1])
+                    params[1].value = String(value);
+                return;
+            }
+        }
+        if (isApiStepConfig(this.step)) {
+            const api = this.step;
+            if (key === 'method') {
+                api.method = value;
+                return;
+            }
+            if (key === 'url') {
+                api.endpoint = String(value);
+                return;
+            }
+            if (key === 'headers') {
+                try {
+                    api.headers = JSON.parse(String(value) || '{}');
+                }
+                catch (_a) {
+                    api.headers = {};
+                }
+                return;
+            }
+            if (key === 'body') {
+                api.requestBody = String(value);
+                return;
+            }
+            if (key === 'saveOutputAsVariable') {
+                api.saveTo = String(value);
+                return;
+            }
+        }
+        if (isAiAgentStepConfig(this.step)) {
+            const ai = this.step;
+            if (key === 'agentTask') {
+                ai.instructions = String(value);
+                return;
+            }
+            if (key === 'description') {
+                ai.description = String(value);
+                return;
+            }
+            if (key === 'metadata') {
+                step.metadata = value;
+                return;
+            }
+        }
+        step[key] = value;
+    }
+    onBack() {
+        this.cancel.emit();
+        this.ref.close(undefined);
+    }
+    onClose() {
+        this.cancel.emit();
+        this.ref.close(undefined);
+    }
+    onCancel() {
+        this.cancel.emit();
+        this.ref.close(undefined);
+    }
+    onSaveAsTemplate() {
+        this.applyFormToStep();
+        this.saveAsTemplate.emit(this.step);
+        this.ref.close({ action: 'saveAsTemplate', step: this.step });
+    }
+    onSaveChanges() {
+        this.applyFormToStep();
+        this.saveChanges.emit(this.step);
+        this.ref.close({ action: 'saveChanges', step: this.step });
+    }
+    applyFormToStep() {
+        var _a, _b;
+        for (const key of this.visibleFields) {
+            if (key === 'advanced')
+                continue;
+            if (this.form.contains(key))
+                this.setStepValue(key, (_a = this.form.get(key)) === null || _a === void 0 ? void 0 : _a.value);
+        }
+        for (const key of ADVANCED_TOGGLE_KEYS) {
+            if (this.form.contains(key))
+                this.setStepValue(key, (_b = this.form.get(key)) === null || _b === void 0 ? void 0 : _b.value);
+        }
+    }
+    /** Build cached map of select configs from field meta (stable refs to prevent CD loops). */
+    buildSelectConfigMap() {
+        var _a, _b;
+        const map = {};
+        const keys = Object.keys(STEP_DETAILS_FIELD_META);
+        for (const key of keys) {
+            const meta = STEP_DETAILS_FIELD_META[key];
+            if (!meta || meta.controlType !== 'dropdown' || !((_a = meta.options) === null || _a === void 0 ? void 0 : _a.length))
+                continue;
+            const options = meta.options.map((o) => ({ value: o.value, label: o.label }));
+            map[key] = {
+                key: meta.key,
+                placeholder: (_b = meta.placeholder) !== null && _b !== void 0 ? _b : meta.label,
+                options,
+            };
+        }
+        return map;
+    }
+    /** Return cached select config for key (for template use; same reference every time). */
+    getSelectConfig(key) {
+        var _a;
+        return (_a = this.selectConfigMap[key]) !== null && _a !== void 0 ? _a : null;
+    }
+    /** Whether this key is the first in its section (for showing section headings). */
+    isFirstInSection(key, section) {
+        const meta = STEP_DETAILS_FIELD_META[key];
+        if (!meta || meta.section !== section)
+            return false;
+        const idx = this.visibleFields.indexOf(key);
+        if (idx <= 0)
+            return true;
+        const prevMeta = STEP_DETAILS_FIELD_META[this.visibleFields[idx - 1]];
+        return !prevMeta || prevMeta.section !== section;
+    }
+    /** Dynamic drawer title by step type (e.g. "AI Agent Step Details"). */
+    get drawerTitle() {
+        if (this.stepType === 'custom')
+            return 'Custom Step Details';
+        if (this.stepType === 'api')
+            return 'API Step Details';
+        if (this.stepType === 'aiAgent')
+            return 'AI Agent Step Details';
+        return 'Step Details';
+    }
+}
+StepDetailsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, deps: [{ token: STEP_DETAILS_DRAWER_REF }, { token: i2$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: STEP_DETAILS_DRAWER_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. No Priority. Fully config-driven. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n  <!-- Header: back chevron, dynamic title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-4 cqa-py-4 cqa-bg-white cqa-rounded-t-[12px] cqa-border cqa-border-[#E5E5E5]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button type=\"button\" (click)=\"onBack()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n        aria-label=\"Back\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">chevron_left</mat-icon>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ drawerTitle }}\n      </h2>\n      <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[12px] cqa-font-medium\">\n        Step {{ stepNumber }}\n      </span>\n    </div>\n    <button type=\"button\" (click)=\"onClose()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n      title=\"Close\" aria-label=\"Close\">\n      <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n    </button>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n\n  <!-- Content: Attributes + dynamic fields from config -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-px-4 cqa-py-4\">\n    <ng-container *ngIf=\"stepType\">\n      <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Attributes</p>\n\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n        <ng-container *ngFor=\"let key of visibleFields\">\n          <!-- Section heading: Constraints (first constraints field only) -->\n          <ng-container *ngIf=\"key !== 'advanced' && isFirstInSection(key, 'constraints')\">\n            <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-2 cqa-mt-0\">Constraints</p>\n          </ng-container>\n\n          <!-- Advanced: expandable section with config-driven toggles + subfields -->\n          <ng-container *ngIf=\"key === 'advanced'\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n              (click)=\"advancedExpanded = !advancedExpanded\">\n              <span>Advanced</span>\n              <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n                expand_less\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n              <!-- Advanced toggles from config -->\n              <ng-container *ngFor=\"let toggleKey of advancedToggleKeys\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\" *ngIf=\"fieldMeta[toggleKey]\">\n                  <cqa-custom-toggle\n                    [checked]=\"form.get(toggleKey)?.value\"\n                    (checkedChange)=\"form.get(toggleKey)?.setValue($event)\">\n                  </cqa-custom-toggle>\n                  <div class=\"cqa-flex cqa-flex-col\">\n                    <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ fieldMeta[toggleKey].label }}</span>\n                    <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"fieldMeta[toggleKey].subLabel\">{{ fieldMeta[toggleKey].subLabel }}</span>\n                  </div>\n                </div>\n              </ng-container>\n              <!-- Advanced subfields (e.g. Retry Count, Iframe locator, Other Locators for aiAgent) -->\n              <ng-container *ngFor=\"let subKey of advancedSubfields\">\n                <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\" *ngIf=\"fieldMeta[subKey]?.controlType === 'dropdown' && getSelectConfig(subKey) && form.contains(subKey)\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[subKey].label }}</label>\n                  <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(subKey)!\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Skip: advanced key (already rendered) and fields that are rendered inside advanced for this step type -->\n          <ng-container *ngIf=\"key !== 'advanced' && !(stepType === 'aiAgent' && advancedSubfields.includes(key))\">\n            <!-- text -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'text'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n              <cqa-custom-input\n                [placeholder]=\"fieldMeta[key].placeholder || ''\"\n                [value]=\"form.get(key)?.value\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n\n            <!-- textarea (including agentTask with optional required + tip) -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n                <span *ngIf=\"fieldMeta[key].required\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n              </div>\n              <p *ngIf=\"key === 'agentTask'\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">What should the agent achieve?</p>\n              <cqa-custom-textarea\n                [placeholder]=\"fieldMeta[key].placeholder || ''\"\n                [value]=\"form.get(key)?.value\"\n                [fullWidth]=\"true\"\n                [rows]=\"fieldMeta[key].rows || 4\"\n                customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n                (valueChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-textarea>\n              <p *ngIf=\"fieldMeta[key].tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">{{ fieldMeta[key].tip }}</p>\n            </div>\n\n            <!-- code -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n              <cqa-custom-textarea\n                [placeholder]=\"fieldMeta[key].placeholder || ''\"\n                [value]=\"form.get(key)?.value\"\n                [fullWidth]=\"true\"\n                [rows]=\"8\"\n                resize=\"vertical\"\n                customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n                (valueChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n\n            <!-- dropdown (main + constraints; advanced-only dropdowns rendered inside Advanced section) -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'dropdown' && form.contains(key) && getSelectConfig(key) && !advancedSubfields.includes(key)\"\n              class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(key)!\">\n              </cqa-dynamic-select>\n            </div>\n\n            <!-- toggle (e.g. onlyUseAttachedContext, takeScreenshotsWhenVerifying) -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'toggle'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n              <div>\n                <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ fieldMeta[key].label }}</p>\n                <span *ngIf=\"fieldMeta[key].subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].subLabel }}</span>\n              </div>\n              <cqa-custom-toggle\n                [checked]=\"form.get(key)?.value\"\n                (checkedChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-toggle>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"!stepType\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">This step type is not supported in the drawer.</p>\n  </div>\n<div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-[#F5F5F54D]\">\n    <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n    <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n    <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { 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: 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-step-details-drawer', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step Details Drawer \u2013 Edit In Depth. No Priority. Fully config-driven. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n  <!-- Header: back chevron, dynamic title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-4 cqa-py-4 cqa-bg-white cqa-rounded-t-[12px] cqa-border cqa-border-[#E5E5E5]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button type=\"button\" (click)=\"onBack()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n        aria-label=\"Back\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">chevron_left</mat-icon>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ drawerTitle }}\n      </h2>\n      <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[12px] cqa-font-medium\">\n        Step {{ stepNumber }}\n      </span>\n    </div>\n    <button type=\"button\" (click)=\"onClose()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n      title=\"Close\" aria-label=\"Close\">\n      <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n    </button>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n\n  <!-- Content: Attributes + dynamic fields from config -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-px-4 cqa-py-4\">\n    <ng-container *ngIf=\"stepType\">\n      <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Attributes</p>\n\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n        <ng-container *ngFor=\"let key of visibleFields\">\n          <!-- Section heading: Constraints (first constraints field only) -->\n          <ng-container *ngIf=\"key !== 'advanced' && isFirstInSection(key, 'constraints')\">\n            <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-2 cqa-mt-0\">Constraints</p>\n          </ng-container>\n\n          <!-- Advanced: expandable section with config-driven toggles + subfields -->\n          <ng-container *ngIf=\"key === 'advanced'\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n              (click)=\"advancedExpanded = !advancedExpanded\">\n              <span>Advanced</span>\n              <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n                expand_less\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n              <!-- Advanced toggles from config -->\n              <ng-container *ngFor=\"let toggleKey of advancedToggleKeys\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\" *ngIf=\"fieldMeta[toggleKey]\">\n                  <cqa-custom-toggle\n                    [checked]=\"form.get(toggleKey)?.value\"\n                    (checkedChange)=\"form.get(toggleKey)?.setValue($event)\">\n                  </cqa-custom-toggle>\n                  <div class=\"cqa-flex cqa-flex-col\">\n                    <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ fieldMeta[toggleKey].label }}</span>\n                    <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"fieldMeta[toggleKey].subLabel\">{{ fieldMeta[toggleKey].subLabel }}</span>\n                  </div>\n                </div>\n              </ng-container>\n              <!-- Advanced subfields (e.g. Retry Count, Iframe locator, Other Locators for aiAgent) -->\n              <ng-container *ngFor=\"let subKey of advancedSubfields\">\n                <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\" *ngIf=\"fieldMeta[subKey]?.controlType === 'dropdown' && getSelectConfig(subKey) && form.contains(subKey)\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[subKey].label }}</label>\n                  <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(subKey)!\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Skip: advanced key (already rendered) and fields that are rendered inside advanced for this step type -->\n          <ng-container *ngIf=\"key !== 'advanced' && !(stepType === 'aiAgent' && advancedSubfields.includes(key))\">\n            <!-- text -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'text'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n              <cqa-custom-input\n                [placeholder]=\"fieldMeta[key].placeholder || ''\"\n                [value]=\"form.get(key)?.value\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n\n            <!-- textarea (including agentTask with optional required + tip) -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n                <span *ngIf=\"fieldMeta[key].required\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n              </div>\n              <p *ngIf=\"key === 'agentTask'\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">What should the agent achieve?</p>\n              <cqa-custom-textarea\n                [placeholder]=\"fieldMeta[key].placeholder || ''\"\n                [value]=\"form.get(key)?.value\"\n                [fullWidth]=\"true\"\n                [rows]=\"fieldMeta[key].rows || 4\"\n                customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n                (valueChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-textarea>\n              <p *ngIf=\"fieldMeta[key].tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">{{ fieldMeta[key].tip }}</p>\n            </div>\n\n            <!-- code -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n              <cqa-custom-textarea\n                [placeholder]=\"fieldMeta[key].placeholder || ''\"\n                [value]=\"form.get(key)?.value\"\n                [fullWidth]=\"true\"\n                [rows]=\"8\"\n                resize=\"vertical\"\n                customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n                (valueChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n\n            <!-- dropdown (main + constraints; advanced-only dropdowns rendered inside Advanced section) -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'dropdown' && form.contains(key) && getSelectConfig(key) && !advancedSubfields.includes(key)\"\n              class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(key)!\">\n              </cqa-dynamic-select>\n            </div>\n\n            <!-- toggle (e.g. onlyUseAttachedContext, takeScreenshotsWhenVerifying) -->\n            <div *ngIf=\"fieldMeta[key]?.controlType === 'toggle'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n              <div>\n                <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ fieldMeta[key].label }}</p>\n                <span *ngIf=\"fieldMeta[key].subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ fieldMeta[key].subLabel }}</span>\n              </div>\n              <cqa-custom-toggle\n                [checked]=\"form.get(key)?.value\"\n                (checkedChange)=\"form.get(key)?.setValue($event)\">\n              </cqa-custom-toggle>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"!stepType\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">This step type is not supported in the drawer.</p>\n  </div>\n<div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-[#F5F5F54D]\">\n    <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n    <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n    <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: StepDetailsDrawerRef, decorators: [{
+                        type: Inject,
+                        args: [STEP_DETAILS_DRAWER_REF]
+                    }] }, { type: i2$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [STEP_DETAILS_DRAWER_DATA]
+                    }] }];
+    }, propDecorators: { saveChanges: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], saveAsTemplate: [{
+                type: Output
+            }], stepData: [{
+                type: Input
+            }], stepNumberInput: [{
+                type: Input
+            }] } });
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -22155,7 +22708,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderDocumentGenerationTemplateStepComponent,
         ElementListComponent,
         StepBuilderDocumentComponent,
-        StepBuilderApiComponent], imports: [CommonModule,
+        StepBuilderApiComponent,
+        StepDetailsDrawerComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatIconModule,
@@ -22279,7 +22833,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderDocumentGenerationTemplateStepComponent,
         StepBuilderApiComponent,
         ElementListComponent,
-        StepBuilderDocumentComponent] });
+        StepBuilderDocumentComponent,
+        StepDetailsDrawerComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
         {
@@ -22453,6 +23008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ElementListComponent,
                         StepBuilderDocumentComponent,
                         StepBuilderApiComponent,
+                        StepDetailsDrawerComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -22583,6 +23139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderApiComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
+                        StepDetailsDrawerComponent,
                     ],
                     providers: [
                         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
@@ -22759,9 +23316,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
+/**
+ * Opens the Step Details Drawer (Edit In Depth) from the right.
+ */
+class StepDetailsDrawerService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+        this.currentRef = null;
+    }
+    open(data) {
+        if (this.currentRef)
+            return this.currentRef;
+        const drawerWidth = 480;
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .right('0')
+            .top('0')
+            .bottom('0')
+            .width(`${drawerWidth}px`);
+        const overlayRef = this.overlay.create(new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy,
+            panelClass: ['cqa-step-details-drawer-panel', 'cqa-ui-root'],
+            width: `${drawerWidth}px`,
+            maxWidth: '100vw',
+            height: '100%',
+        }));
+        const drawerRef = new StepDetailsDrawerRef(overlayRef);
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: STEP_DETAILS_DRAWER_REF, useValue: drawerRef },
+                { provide: STEP_DETAILS_DRAWER_DATA, useValue: data },
+            ],
+        });
+        const portal = new ComponentPortal(StepDetailsDrawerComponent, undefined, injector);
+        overlayRef.attach(portal);
+        this.currentRef = drawerRef;
+        drawerRef.afterClosed().subscribe(() => { this.currentRef = null; });
+        overlayRef.backdropClick().subscribe(() => drawerRef.close({ action: 'cancel' }));
+        overlayRef
+            .keydownEvents()
+            .pipe(filter((e) => e.key === 'Escape' || e.key === 'Esc'))
+            .subscribe(() => drawerRef.close({ action: 'cancel' }));
+        return drawerRef;
+    }
+}
+StepDetailsDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+StepDetailsDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
 /**
  * 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, 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 };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, 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, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderApiComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, 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, getStepDetailsStepType, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map