npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.373 → 1.1.375 - Mend

@cqa-lib/cqa-ui 1.1.373 → 1.1.375

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

Files changed (14) hide show

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

@@ -26621,10 +26621,10 @@ class TestCaseAiVerifyStepComponent {
     }
 }
 TestCaseAiVerifyStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseAiVerifyStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiVerifyStepComponent, selector: "cqa-test-case-ai-verify-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    </div>\n    <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n    <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n    <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n      {{ config.createdDate | date:'d MMM yyyy' }}\n    </span>\n  </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseAiVerifyStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiVerifyStepComponent, selector: "cqa-test-case-ai-verify-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    </div>\n    <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n    <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n    <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n      {{ config.createdDate | date:'d MMM yyyy' }}\n    </span>\n  </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-ai-verify-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    </div>\n    <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n    <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n    <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n      {{ config.createdDate | date:'d MMM yyyy' }}\n    </span>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-test-case-ai-verify-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    </div>\n    <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n    <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n    <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n      {{ config.createdDate | date:'d MMM yyyy' }}\n    </span>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -30557,7 +30557,7 @@ class TemplateVariablesFormComponent {
         this.cdr.markForCheck();
     }
     ngOnChanges(changes) {
-        var _a, _b;
+        var _a, _b, _c;
         if (changes['templateVariables'] || changes['variablesForm'] || changes['elementOptions'] ||
             changes['hasMoreElements'] || changes['isLoadingElements'] ||
             changes['parameterOptions'] || changes['hasMoreParameters'] || changes['isLoadingParameters'] ||
@@ -30800,9 +30800,16 @@ class TemplateVariablesFormComponent {
                 changes['parameterOptions'].firstChange &&
                 this.parameterOptions.length > 0 &&
                 ((this.defaultTestDataProfileId && this.defaultTestDataStartIndex != null) ||
+                    (
+                    // Check if any variable has selectedTestDataProfileId but is missing selectedTestDataProfile or selectedDataSet
+                    // This happens when loading a saved step - setTemplateVariables sets the ID, but we need parameterOptions to set the name and data set
+                    (_b = this.templateVariables) === null || _b === void 0 ? void 0 : _b.some(v => this.needsDataTypeDropdown(v) &&
+                        v.dataType === 'parameter' &&
+                        v.selectedTestDataProfileId != null &&
+                        (!v.selectedTestDataProfile || !v.selectedDataSet))) ||
                     // The extra uninitialized-variable check below is debug-only: only run it in debug mode
                     // to avoid double-initialising variables in non-debug step-builder flows.
-                    (this.isDebug && ((_b = this.templateVariables) === null || _b === void 0 ? void 0 : _b.some(v => this.needsDataTypeDropdown(v) && v.dataType === 'parameter' && !v.selectedTestDataProfile))))) {
+                    (this.isDebug && ((_c = this.templateVariables) === null || _c === void 0 ? void 0 : _c.some(v => this.needsDataTypeDropdown(v) && v.dataType === 'parameter' && !v.selectedTestDataProfile))))) {
                 console.log("parameterOptions InitializeTestDataVariables", changes['parameterOptions']);
                 // Re-initialize to set default values now that parameterOptions are available
                 this.initializeTestDataVariables();
@@ -30842,37 +30849,73 @@ class TemplateVariablesFormComponent {
         this.templateVariables.forEach((variable, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             if (this.needsDataTypeDropdown(variable)) {
+                // Preserve existing dataType if already set (e.g., from setTemplateVariables when loading saved step)
+                const existingDataType = variable.dataType;
                 const { dataType, rawValue } = this.parseTestDataValue(variable.value || '');
                 // Set properties directly on the variable object
-                variable.dataType = dataType;
+                // Use existing dataType if it was already set, otherwise use parsed dataType
+                variable.dataType = existingDataType || dataType;
                 variable.rawValue = rawValue;
                 // Ensure form control exists for data type in the FormArray
                 const variableGroup = this.getVariableFormGroup(variable.name);
                 if (variableGroup) {
+                    const finalDataType = variable.dataType; // Use the final dataType (existing or parsed)
                     if (!variableGroup.get('dataType')) {
-                        variableGroup.addControl('dataType', new FormControl(dataType));
+                        variableGroup.addControl('dataType', new FormControl(finalDataType));
                     }
                     else {
-                        (_a = variableGroup.get('dataType')) === null || _a === void 0 ? void 0 : _a.setValue(dataType, { emitEvent: false });
+                        (_a = variableGroup.get('dataType')) === null || _a === void 0 ? void 0 : _a.setValue(finalDataType, { emitEvent: false });
                     }
                     // For parameter type, parse the value to extract test data profile and parameter
-                    if (dataType === 'parameter') {
-                        // Check if default test data profile and data set are provided from test case
+                    if (finalDataType === 'parameter') {
+                        // Priority 1: Use saved test data profile ID from testStep.testDataList (set by setTemplateVariables)
                         // Only proceed if parameterOptions are loaded
-                        if (this.defaultTestDataProfileId && this.defaultTestDataStartIndex != null && this.parameterOptions.length > 0) {
-                            // Find the test data profile by ID
-                            const defaultProfile = this.parameterOptions.find((testData) => testData.id === this.defaultTestDataProfileId);
-                            if (defaultProfile && defaultProfile.data && defaultProfile.data.length > this.defaultTestDataStartIndex) {
-                                const defaultDataSet = defaultProfile.data[this.defaultTestDataStartIndex];
-                                const profileName = defaultProfile.name || defaultProfile.testDataName;
-                                const dataSetName = defaultDataSet.name;
+                        if (this.parameterOptions.length > 0) {
+                            let profileToUse = null;
+                            let dataSetToUse = null;
+                            // First, check if variable already has selectedTestDataProfileId (from saved step)
+                            if (variable.selectedTestDataProfileId != null) {
+                                profileToUse = this.parameterOptions.find((testData) => testData.id === variable.selectedTestDataProfileId);
+                                if (profileToUse && profileToUse.data && profileToUse.data.length > 0) {
+                                    // Find the data set that contains the parameter value
+                                    const paramName = rawValue;
+                                    if (paramName && paramName.trim()) {
+                                        // Search through all data sets to find the one containing this parameter
+                                        for (const dataSet of profileToUse.data) {
+                                            if (dataSet && dataSet.data) {
+                                                // Check if this data set has the parameter
+                                                if (dataSet.data.hasOwnProperty(paramName)) {
+                                                    dataSetToUse = dataSet;
+                                                    break;
+                                                }
+                                            }
+                                        }
+                                    }
+                                    // If not found by parameter name, use first data set as fallback
+                                    // This ensures the data set dropdown is shown even if parameter isn't found yet
+                                    if (!dataSetToUse && profileToUse.data.length > 0) {
+                                        dataSetToUse = profileToUse.data[0];
+                                    }
+                                }
+                            }
+                            // Priority 2: Use default test data profile and data set from test case
+                            if (!profileToUse && this.defaultTestDataProfileId && this.defaultTestDataStartIndex != null) {
+                                profileToUse = this.parameterOptions.find((testData) => testData.id === this.defaultTestDataProfileId);
+                                if (profileToUse && profileToUse.data && profileToUse.data.length > this.defaultTestDataStartIndex) {
+                                    dataSetToUse = profileToUse.data[this.defaultTestDataStartIndex];
+                                }
+                            }
+                            // If we found a profile and data set, set the variable properties
+                            if (profileToUse && dataSetToUse) {
+                                const profileName = profileToUse.name || profileToUse.testDataName;
+                                const dataSetName = dataSetToUse.name;
                                 // Set variable properties - this ensures hasSelectedTestDataProfile() and hasSelectedDataSet() return true
                                 variable.selectedTestDataProfile = profileName;
-                                variable.selectedTestDataProfileId = defaultProfile.id;
+                                variable.selectedTestDataProfileId = profileToUse.id;
                                 variable.selectedDataSet = dataSetName;
                                 // Set form controls with the actual values so dropdowns display selected options
                                 // Use profile ID (string) for selectedTestDataProfile form control to match option.id format
-                                const profileIdString = String(defaultProfile.id);
+                                const profileIdString = String(profileToUse.id);
                                 if (!variableGroup.get('selectedTestDataProfile')) {
                                     variableGroup.addControl('selectedTestDataProfile', new FormControl(profileIdString));
                                 }
@@ -30885,9 +30928,13 @@ class TemplateVariablesFormComponent {
                                 else {
                                     (_c = variableGroup.get('selectedDataSet')) === null || _c === void 0 ? void 0 : _c.setValue(dataSetName, { emitEvent: false });
                                 }
-                                // Don't set parameter value yet - user will select it
+                                // Set parameter value if we found it in the data set, otherwise clear it for user selection
                                 if (variableGroup.get('value')) {
-                                    (_d = variableGroup.get('value')) === null || _d === void 0 ? void 0 : _d.setValue('', { emitEvent: false });
+                                    // If we found the parameter in a data set, set it; otherwise clear for user selection
+                                    const paramValue = rawValue && dataSetToUse && dataSetToUse.data && dataSetToUse.data.hasOwnProperty(rawValue)
+                                        ? variable.value // Use the formatted value (e.g., @|t666666|)
+                                        : '';
+                                    (_d = variableGroup.get('value')) === null || _d === void 0 ? void 0 : _d.setValue(paramValue, { emitEvent: false });
                                 }
                                 // Clear caches to force recomputation of configs with new values
                                 // Clear all cache entries for this variable to ensure fresh configs
@@ -30909,10 +30956,9 @@ class TemplateVariablesFormComponent {
                                 });
                                 paramKeysToDelete.forEach(key => this.parameterForDataSetSelectConfigCache.delete(key));
                             }
-                            else {
-                            }
                         }
-                        else {
+                        // Priority 3: If no saved or default profile found, search by parameter value
+                        if (!variable.selectedTestDataProfileId && this.parameterOptions.length > 0) {
                             // No default values - use existing logic to find from parameter value
                             const paramName = rawValue;
                             if (paramName) {
@@ -31104,6 +31150,8 @@ class TemplateVariablesFormComponent {
                 }
             }
         });
+        // Mark for check to ensure UI updates after initialization
+        this.cdr.markForCheck();
     }
     /** Get form group for a variable by name from FormArray */
     getVariableFormGroup(variableName) {
@@ -32626,10 +32674,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", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; 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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; 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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <!-- Show custom input for plain-text type -->\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; 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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; 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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <!-- Show custom input for plain-text type -->\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\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</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{
@@ -33246,6 +33294,14 @@ class StepBuilderActionComponent {
                         const value = variable.value;
                         return value !== null && value !== undefined && value !== '';
                     }
+                    if (variable.dataType === 'parameter') {
+                        const value = variable.value;
+                        return value !== null && value !== undefined && value !== '';
+                    }
+                    if (variable.dataType === 'environment') {
+                        const value = variable.value;
+                        return value !== null && value !== undefined && value !== '';
+                    }
                 }
                 return true;
             });
@@ -33397,9 +33453,14 @@ class StepBuilderActionComponent {
         console.log(key, value);
     }
     /**
-     * Update HTML grammar by replacing placeholder spans with actual variable values
+     * Update HTML grammar by replacing placeholder spans with actual variable values.
+     * Delegates to computeHtmlGrammarFn when provided by the host app (centralised logic in StepBuilderService).
      */
     updateHtmlGrammar() {
+        if (this.computeHtmlGrammarFn) {
+            this.updatedHtmlGrammar = this.computeHtmlGrammarFn(this.selectedTemplate, this.templateVariables);
+            return;
+        }
         if (!this.selectedTemplate) {
             this.updatedHtmlGrammar = '';
             return;
@@ -33529,7 +33590,7 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [isDebug]=\"isDebug\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge\n          label=\"Creating\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [isDebug]=\"isDebug\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge\n          label=\"Creating\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [isDebug]=\"isDebug\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge\n          label=\"Creating\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
@@ -33557,6 +33618,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], setAdvancedSettingsVariables: [{
                 type: Input
+            }], computeHtmlGrammarFn: [{
+                type: Input
             }], preventSelectTemplate: [{
                 type: Input
             }], elementOptions: [{
@@ -34263,10 +34326,10 @@ class StepBuilderLoopComponent {
     }
 }
 StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isDebug: "isDebug", testStep: "testStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: 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"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isCreatingStep"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isDebug: "isDebug", testStep: "testStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: 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"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isCreatingStep"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { loopType: [{
                 type: Input
             }], selectOptions: [{
@@ -34283,6 +34346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], setAdvancedSettingsVariables: [{
                 type: Input
+            }], computeHtmlGrammarFn: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -34862,16 +34927,20 @@ class StepBuilderConditionComponent {
         return tmp.textContent || tmp.innerText || '';
     }
     /**
-     * Update HTML grammar for a specific condition with actual variable values
+     * Update HTML grammar for a specific condition with actual variable values.
+     * Delegates to computeHtmlGrammarFn when provided by the host app (centralised logic in StepBuilderService).
      */
     updateConditionHtmlGrammar(conditionIndex) {
         const template = this.selectedTemplates.get(conditionIndex);
         if (!template || !template.htmlGrammar) {
             return;
         }
-        let updatedGrammar = template.htmlGrammar;
         const variables = this.conditionTemplateVariables.get(conditionIndex) || [];
-        // Replace placeholders with actual values
+        if (this.computeHtmlGrammarFn) {
+            this.conditionUpdatedHtmlGrammar.set(conditionIndex, this.computeHtmlGrammarFn(template, variables));
+            return;
+        }
+        let updatedGrammar = template.htmlGrammar;
         variables.forEach(variable => {
             const placeholder = new RegExp(`<span[^>]*data-event-key="${variable.name}"[^>]*>.*?</span>`, 'gi');
             const value = variable.value || '';
@@ -35046,6 +35115,14 @@ class StepBuilderConditionComponent {
                         const value = variable.value;
                         return value !== null && value !== undefined && value !== '';
                     }
+                    if (variable.dataType === 'parameter') {
+                        const value = variable.value;
+                        return value !== null && value !== undefined && value !== '';
+                    }
+                    if (variable.dataType === 'environment') {
+                        const value = variable.value;
+                        return value !== null && value !== undefined && value !== '';
+                    }
                 }
                 return true;
             });
@@ -35108,7 +35185,7 @@ class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n                <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n                  <button type=\"button\"\n                    class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n                    (click)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n                <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n                  <button type=\"button\"\n                    class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n                    (click)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], 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: StepBuilderConditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n                <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n                  <button type=\"button\"\n                    class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n                    (click)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", styles: [] }]
@@ -35120,6 +35197,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], setAdvancedSettingsVariables: [{
                 type: Input
+            }], computeHtmlGrammarFn: [{
+                type: Input
             }], elementOptions: [{
                 type: Input
             }], hasMoreElements: [{