@cqa-lib/cqa-ui 1.1.219 → 1.1.221

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

@@ -12332,6 +12332,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class JumpToStepModalComponent {
+    constructor() {
+        /** Whether the modal is open */
+        this.isOpen = false;
+        /** Modal title */
+        this.title = 'Jump to Step';
+        /** List of step items to display */
+        this.items = [];
+        /** Search placeholder text */
+        this.searchPlaceholder = 'Search steps by name or number...';
+        /** Search Empty State text */
+        this.searchEmptyStateLabel = 'No steps found';
+        /** Current search value */
+        this.searchValue = '';
+        /** Whether search is enabled */
+        this.enableSearch = true;
+        /** Filtered items based on search */
+        this.filteredItems = [];
+        /** Emitted when modal should be closed */
+        this.onClose = new EventEmitter();
+        /** Emitted when search value changes */
+        this.onSearch = new EventEmitter();
+        /** Emitted when a step item is selected */
+        this.onSelect = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] || changes['searchValue']) {
+            this.updateFilteredItems();
+        }
+    }
+    updateFilteredItems() {
+        if (!this.items || this.items.length === 0) {
+            this.filteredItems = [];
+            return;
+        }
+        if (!this.searchValue || this.searchValue.trim() === '') {
+            this.filteredItems = [...this.items];
+            return;
+        }
+        const searchTerm = this.searchValue.toLowerCase().trim();
+        this.filteredItems = this.items.filter(item => {
+            const stepNumberMatch = String(item.stepNumber).toLowerCase().includes(searchTerm);
+            const descriptionMatch = item.description.toLowerCase().includes(searchTerm);
+            return stepNumberMatch || descriptionMatch;
+        });
+    }
+    onSearchValueChange(value) {
+        this.searchValue = value;
+        this.updateFilteredItems();
+        this.onSearch.emit(value);
+    }
+    onItemClick(item) {
+        this.onSelect.emit(item);
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        if (target === currentTarget || target.classList.contains('modal-backdrop')) {
+            this.handleClose();
+        }
+    }
+    handleClose() {
+        this.onClose.emit();
+    }
+    getStatusBadgeClasses(status) {
+        const baseClasses = 'cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-3';
+        switch (status) {
+            case 'passed':
+                return `${baseClasses} cqa-bg-green-100 cqa-text-green-800`;
+            case 'current':
+                return `${baseClasses} cqa-bg-blue-100 cqa-text-blue-800`;
+            case 'pending':
+                return `${baseClasses} cqa-bg-gray-100 cqa-text-gray-800`;
+            case 'failed':
+                return `${baseClasses} cqa-bg-red-100 cqa-text-red-800`;
+            case 'running':
+                return `${baseClasses} cqa-bg-blue-100 cqa-text-blue-800`;
+            case 'skipped':
+                return `${baseClasses} cqa-bg-gray-100 cqa-text-gray-800`;
+            default:
+                return `${baseClasses} cqa-bg-gray-100 cqa-text-gray-800`;
+        }
+    }
+    get hasItems() {
+        return this.filteredItems && this.filteredItems.length > 0;
+    }
+    get itemsCount() {
+        return this.filteredItems ? this.filteredItems.length : 0;
+    }
+    /** Convert stepNumber to string for the badge label (String() is not available in templates) */
+    toLabel(value) {
+        return '' + value;
+    }
+    trackByItemId(index, item) {
+        return item.id;
+    }
+}
+JumpToStepModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+JumpToStepModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: JumpToStepModalComponent, selector: "cqa-jump-to-step-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", searchPlaceholder: "searchPlaceholder", searchEmptyStateLabel: "searchEmptyStateLabel", searchValue: "searchValue", enableSearch: "enableSearch" }, outputs: { onClose: "onClose", onSearch: "onSearch", onSelect: "onSelect" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg  cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n      <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n        {{ title }}\n      </h2>\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close modal\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n      </button>\n    </div>\n\n\n    <!-- Search Bar -->\n    <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n      <cqa-search-bar\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"onSearchValueChange($event)\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Divider below search -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Steps List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n         {{searchEmptyStateLabel || 'No Data found.'}}\n        </p>\n      </div>\n\n      <!-- Steps List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col\">\n        <button\n          *ngFor=\"let item of filteredItems; trackBy: trackByItemId\"\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n          (click)=\"onItemClick(item)\">\n\n          <!-- Step Number Badge -->\n          <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n            style=\"min-width: 32px;\">\n            {{ item.stepNumber }}\n          </span>\n\n          <!-- Step Description -->\n          <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">\n            {{ item.description }}\n          </span>\n\n          <!-- Status Badge -->\n          <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">\n            {{ item.status }}\n          </span>\n\n          <!-- Right Arrow Icon-->\n          <!-- <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 4L10 8L6 12\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span> -->\n        </button>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-5 cqa-pt-3\">\n      <p class=\"cqa-text-xs cqa-text-[#6B7280] cqa-font-inter cqa-font-normal\">\n        {{ itemsCount }} {{ itemsCount === 1 ? 'step' : 'steps' }} found\n      </p>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-jump-to-step-modal', host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg  cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n      <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n        {{ title }}\n      </h2>\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close modal\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n      </button>\n    </div>\n\n\n    <!-- Search Bar -->\n    <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n      <cqa-search-bar\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"onSearchValueChange($event)\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Divider below search -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Steps List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n         {{searchEmptyStateLabel || 'No Data found.'}}\n        </p>\n      </div>\n\n      <!-- Steps List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col\">\n        <button\n          *ngFor=\"let item of filteredItems; trackBy: trackByItemId\"\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n          (click)=\"onItemClick(item)\">\n\n          <!-- Step Number Badge -->\n          <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n            style=\"min-width: 32px;\">\n            {{ item.stepNumber }}\n          </span>\n\n          <!-- Step Description -->\n          <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">\n            {{ item.description }}\n          </span>\n\n          <!-- Status Badge -->\n          <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">\n            {{ item.status }}\n          </span>\n\n          <!-- Right Arrow Icon-->\n          <!-- <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 4L10 8L6 12\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span> -->\n        </button>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-5 cqa-pt-3\">\n      <p class=\"cqa-text-xs cqa-text-[#6B7280] cqa-font-inter cqa-font-normal\">\n        {{ itemsCount }} {{ itemsCount === 1 ? 'step' : 'steps' }} found\n      </p>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], searchEmptyStateLabel: [{
+                type: Input
+            }], searchValue: [{
+                type: Input
+            }], enableSearch: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }] } });
+
+class BreakpointsModalComponent {
+    constructor() {
+        /** Whether the modal is open */
+        this.isOpen = false;
+        /** Modal title */
+        this.title = 'Breakpoints';
+        /** List of breakpoint items to display */
+        this.items = [];
+        /** Label for the remove-all button */
+        this.buttonLabel = 'Remove all breakpoints';
+        /** Label for the empty state */
+        this.emptyStateLabel = 'No breakpoints set.';
+        /** Internal copy so items can be removed locally when parent doesn't re-bind */
+        this.displayItems = [];
+        /** Emitted when modal should be closed */
+        this.onClose = new EventEmitter();
+        /** Emitted when a single breakpoint should be removed */
+        this.onRemove = new EventEmitter();
+        /** Emitted when all breakpoints should be removed */
+        this.onRemoveAll = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.displayItems = [...(this.items || [])];
+        }
+    }
+    get summaryText() {
+        const count = this.displayItems.length;
+        if (count === 0)
+            return '';
+        return count === 1 ? '1 breakpoint set' : `${count} breakpoints set`;
+    }
+    get hasItems() {
+        return this.displayItems && this.displayItems.length > 0;
+    }
+    removeItem(item) {
+        this.onRemove.emit(item);
+        this.displayItems = this.displayItems.filter(b => b.stepId !== item.stepId);
+        if (this.displayItems.length === 0) {
+            this.handleClose();
+        }
+    }
+    removeAll() {
+        this.onRemoveAll.emit();
+        this.displayItems = [];
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        if (target === currentTarget || target.classList.contains('modal-backdrop')) {
+            this.handleClose();
+        }
+    }
+    handleClose() {
+        this.onClose.emit();
+    }
+    trackByItemId(index, item) {
+        return item.id;
+    }
+}
+BreakpointsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreakpointsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreakpointsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BreakpointsModalComponent, selector: "cqa-breakpoints-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", buttonLabel: "buttonLabel", emptyStateLabel: "emptyStateLabel" }, outputs: { onClose: "onClose", onRemove: "onRemove", onRemoveAll: "onRemoveAll" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-px-6 cqa-pt-6 cqa-pb-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n        <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base cqa-font-inter\">\n          {{ title }}\n        </h2>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\n          (click)=\"handleClose()\"\n          aria-label=\"Close modal\">\n          <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Summary text -->\n      <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal  cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n        {{ summaryText }}\n      </p>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n          {{ emptyStateLabel || 'No Data Found.' }}\n        </p>\n      </div>\n\n      <!-- Breakpoints List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n        <div\n          *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n          class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n          <!-- Red Breakpoint Dot -->\n          <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n          <!-- Text Content -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n              {{ item.primaryLabel }}\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n              {{ item.secondaryLabel }}\n            </span>\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n              [tooltip]=\"'Remove breakpoint'\"\n              (clicked)=\"removeItem(item)\">\n              <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n              </svg>\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer: Remove All Button -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n      \n      <cqa-button\n        [fullWidth]=\"true\"\n        (click)=\"removeAll()\"\n        [label]=\"buttonLabel\"\n        variant=\"outlined\"\n        color=\"black\"\n        [text]=\"buttonLabel\"\n        >\n      </cqa-button>\n      <!-- <button\n        type=\"button\"\n        class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n        (click)=\"removeAll()\">\n        {{ buttonLabel }}\n      </button> -->\n    </div>\n  </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreakpointsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-breakpoints-modal', host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-px-6 cqa-pt-6 cqa-pb-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n        <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base cqa-font-inter\">\n          {{ title }}\n        </h2>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\n          (click)=\"handleClose()\"\n          aria-label=\"Close modal\">\n          <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Summary text -->\n      <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal  cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n        {{ summaryText }}\n      </p>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n      <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n      <!-- Empty State -->\n      <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n        <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n          {{ emptyStateLabel || 'No Data Found.' }}\n        </p>\n      </div>\n\n      <!-- Breakpoints List -->\n      <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n        <div\n          *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n          class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n          <!-- Red Breakpoint Dot -->\n          <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n          <!-- Text Content -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n              {{ item.primaryLabel }}\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n              {{ item.secondaryLabel }}\n            </span>\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n              [tooltip]=\"'Remove breakpoint'\"\n              (clicked)=\"removeItem(item)\">\n              <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n              </svg>\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer: Remove All Button -->\n    <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n      \n      <cqa-button\n        [fullWidth]=\"true\"\n        (click)=\"removeAll()\"\n        [label]=\"buttonLabel\"\n        variant=\"outlined\"\n        color=\"black\"\n        [text]=\"buttonLabel\"\n        >\n      </cqa-button>\n      <!-- <button\n        type=\"button\"\n        class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n        (click)=\"removeAll()\">\n        {{ buttonLabel }}\n      </button> -->\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], emptyStateLabel: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onRemove: [{
+                type: Output
+            }], onRemoveAll: [{
+                type: Output
+            }] } });
+
 class MainStepCollapseComponent {
     constructor() {
         this.title = 'Prerequisites';
@@ -24024,7 +24231,7 @@ class TemplateVariablesFormComponent {
             return this.needsDataTypeDropdownCache.get(variable.name);
         }
         const label = variable.label?.toLowerCase() || '';
-        const result = label === 'test-data' || label === 'source-value' || label === 'target-value';
+        const result = label === 'test-data' || label === 'source-value' || label === 'target-value' || label === 'source_value' || label === 'target_value';
         this.needsDataTypeDropdownCache.set(variable.name, result);
         return result;
     }
@@ -24110,10 +24317,10 @@ class TemplateVariablesFormComponent {
     }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", components: [{ type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", components: [{ type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{
@@ -28491,6 +28698,19 @@ class StepDetailsDrawerComponent {
         this.pwLocator = [];
         /** Cached select configs per field key (stable refs for change detection). */
         this.selectConfigCache = {};
+        /** Cache for data type select configs */
+        this.dataTypeSelectConfigCache = {};
+        /** Store data types for test-data fields */
+        this.fieldDataTypes = new Map();
+        /** Store raw values (without formatting) for test-data fields */
+        this.fieldRawValues = new Map();
+        /** Pre-computed data type options (static, no need to recreate) */
+        this.dataTypeOptions = [
+            { id: 'plain-text', value: 'plain-text', name: 'Plain Text', label: 'Plain Text' },
+            { id: 'parameter', value: 'parameter', name: '@|Parameter|', label: '@|Parameter|' },
+            { id: 'runtime', value: 'runtime', name: '$|Runtime|', label: '$|Runtime|' },
+            { id: 'environment', value: 'environment', name: '*|Environment|', label: '*|Environment|' }
+        ];
         this.step = data?.step ?? {};
         this.stepNumber = data?.stepNumber ?? 1;
         this.dynamicFields = data?.dynamicFields ?? [];
@@ -28581,9 +28801,21 @@ class StepDetailsDrawerComponent {
                 ? field.defaultValue
                 : raw;
             group[field.key] = [value];
+            // Initialize data types and raw values for test-data fields
+            if (this.needsDataTypeDropdown(field)) {
+                const { dataType, rawValue } = this.parseTestDataValue(String(value || ''));
+                this.fieldDataTypes.set(field.key, dataType);
+                this.fieldRawValues.set(field.key, rawValue);
+                // Ensure form control exists for data type
+                const dataTypeControlName = `${field.key}_dataType`;
+                if (!this.form.get(dataTypeControlName)) {
+                    group[dataTypeControlName] = [dataType];
+                }
+            }
         }
         this.form = this.fb.group(group);
         this.selectConfigCache = {};
+        this.dataTypeSelectConfigCache = {};
     }
     /** Read value from step by key. No step-type logic; step is a generic key-value bag. */
     getStepValue(key) {
@@ -28659,12 +28891,121 @@ class StepDetailsDrawerComponent {
     get displayTitle() {
         return this.drawerTitleValue;
     }
+    /** Check if field needs data type dropdown (test-data, source-value, target-value) */
+    needsDataTypeDropdown(field) {
+        const label = field.label?.toLowerCase() || '';
+        return label === 'test-data' || label === 'source-value' || label === 'target-value' ||
+            label === 'source_value' || label === 'target_value';
+    }
+    /** Parse test data value to extract data type and raw value */
+    parseTestDataValue(value) {
+        if (!value || typeof value !== 'string') {
+            return { dataType: 'plain-text', rawValue: '' };
+        }
+        // Check for parameter format: @|value|
+        if (value.startsWith('@|') && value.endsWith('|')) {
+            return { dataType: 'parameter', rawValue: value.slice(2, -1) };
+        }
+        // Check for runtime format: $|value|
+        else if (value.startsWith('$|') && value.endsWith('|')) {
+            return { dataType: 'runtime', rawValue: value.slice(2, -1) };
+        }
+        // Check for environment format: *|value|
+        else if (value.startsWith('*|') && value.endsWith('|')) {
+            return { dataType: 'environment', rawValue: value.slice(2, -1) };
+        }
+        // Plain text (no formatting)
+        else {
+            return { dataType: 'plain-text', rawValue: value };
+        }
+    }
+    /** Format test data value based on data type */
+    formatTestDataValue(rawValue, dataType) {
+        if (!rawValue) {
+            return '';
+        }
+        switch (dataType) {
+            case 'parameter':
+                return `@|${rawValue}|`;
+            case 'runtime':
+                return `$|${rawValue}|`;
+            case 'environment':
+                return `*|${rawValue}|`;
+            case 'plain-text':
+            default:
+                return rawValue;
+        }
+    }
+    /** Get data type select config for a field */
+    getDataTypeSelectConfig(field) {
+        if (!this.needsDataTypeDropdown(field))
+            return null;
+        if (this.dataTypeSelectConfigCache[field.key]) {
+            return this.dataTypeSelectConfigCache[field.key];
+        }
+        const dataTypeControlName = `${field.key}_dataType`;
+        // Ensure form control exists
+        if (!this.form.get(dataTypeControlName)) {
+            const currentDataType = this.fieldDataTypes.get(field.key) || 'plain-text';
+            this.form.addControl(dataTypeControlName, this.fb.control(currentDataType));
+        }
+        const config = {
+            key: dataTypeControlName,
+            placeholder: 'Select Type',
+            multiple: false,
+            searchable: false,
+            options: this.dataTypeOptions,
+            onChange: (value) => {
+                this.onDataTypeChange(field.key, value);
+            }
+        };
+        this.dataTypeSelectConfigCache[field.key] = config;
+        return config;
+    }
+    /** Get current data type for a field */
+    getCurrentDataType(field) {
+        return this.fieldDataTypes.get(field.key) || 'plain-text';
+    }
+    /** Get raw value (without formatting) for a field */
+    getRawValue(field) {
+        return this.fieldRawValues.get(field.key) || '';
+    }
+    /** Handle data type change */
+    onDataTypeChange(fieldKey, dataType) {
+        // Update stored data type
+        this.fieldDataTypes.set(fieldKey, dataType);
+        // Get current raw value
+        const rawValue = this.fieldRawValues.get(fieldKey) || '';
+        // Format the value based on new data type
+        const formattedValue = this.formatTestDataValue(rawValue, dataType);
+        // Update form control
+        if (this.form.get(fieldKey)) {
+            this.form.get(fieldKey)?.setValue(formattedValue, { emitEvent: false });
+        }
+        // Mark for check since we're using OnPush
+        this.cdr.markForCheck();
+    }
+    /** Handle test data value change (raw value input) */
+    onTestDataValueChange(fieldKey, rawValue) {
+        // Update stored raw value
+        this.fieldRawValues.set(fieldKey, rawValue);
+        // Get current data type
+        const dataType = this.fieldDataTypes.get(fieldKey) || 'plain-text';
+        // Format the value based on data type
+        const formattedValue = this.formatTestDataValue(rawValue, dataType);
+        // Update form control
+        if (this.form.get(fieldKey)) {
+            this.form.get(fieldKey)?.setValue(formattedValue, { emitEvent: false });
+        }
+        // Mark for check since we're using OnPush
+        this.cdr.markForCheck();
+    }
 }
 StepDetailsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, deps: [{ token: STEP_DETAILS_DRAWER_REF }, { token: i1$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", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\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, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #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        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\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      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                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            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" 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\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\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          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.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]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    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-white\">\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>", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { 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", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\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, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #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        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\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      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Test-data, source-value, or target-value with data type dropdown -->\n          <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n              <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                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            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" 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\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\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          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            \n            <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n            <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n                <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                  [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n                </cqa-dynamic-select>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n                <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                  [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-container>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.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]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    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-white\">\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>", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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. Fully dynamic from DynamicFieldConfig[]. -->\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, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #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        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\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      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                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            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" 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\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\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          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.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]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    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-white\">\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>" }]
+            args: [{ selector: 'cqa-step-details-drawer', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\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, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #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        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\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      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Test-data, source-value, or target-value with data type dropdown -->\n          <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n              <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                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            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" 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\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\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          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            \n            <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n            <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n                <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                  [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n                </cqa-dynamic-select>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n                <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                  [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-container>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.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]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.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]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    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-white\">\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>" }]
         }], ctorParameters: function () { return [{ type: StepDetailsDrawerRef, decorators: [{
                     type: Inject,
                     args: [STEP_DETAILS_DRAWER_REF]
@@ -28746,6 +29087,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         FileDownloadStepComponent,
         DocumentVerificationStepComponent,
         LiveExecutionStepComponent,
+        JumpToStepModalComponent,
+        BreakpointsModalComponent,
         MainStepCollapseComponent,
         VisualComparisonComponent,
         SimulatorComponent,
@@ -28885,6 +29228,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         FileDownloadStepComponent,
         DocumentVerificationStepComponent,
         LiveExecutionStepComponent,
+        JumpToStepModalComponent,
+        BreakpointsModalComponent,
         MainStepCollapseComponent,
         VisualComparisonComponent,
         SimulatorComponent,
@@ -29071,6 +29416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FileDownloadStepComponent,
                         DocumentVerificationStepComponent,
                         LiveExecutionStepComponent,
+                        JumpToStepModalComponent,
+                        BreakpointsModalComponent,
                         MainStepCollapseComponent,
                         VisualComparisonComponent,
                         SimulatorComponent,
@@ -29216,6 +29563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FileDownloadStepComponent,
                         DocumentVerificationStepComponent,
                         LiveExecutionStepComponent,
+                        JumpToStepModalComponent,
+                        BreakpointsModalComponent,
                         MainStepCollapseComponent,
                         VisualComparisonComponent,
                         SimulatorComponent,
@@ -29954,5 +30303,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map