@cqa-lib/cqa-ui 1.1.485 → 1.1.487

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

@@ -18560,6 +18560,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+class AiPromptCardComponent {
+    constructor() {
+        this.isFailed = false;
+    }
+    get accentColor() {
+        return this.isFailed ? '#FB2C36' : '#3F43EE';
+    }
+    get titleColor() {
+        return this.isFailed ? '#FB2C36' : '#161617';
+    }
+    get stepPrefix() {
+        return `Step ${this.stepNumber} — `;
+    }
+    get metaLine() {
+        return this.runVersion ? `${this.timestamp} · Run ${this.runVersion}` : this.timestamp;
+    }
+}
+AiPromptCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AiPromptCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AiPromptCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AiPromptCardComponent, selector: "cqa-ai-prompt-card", inputs: { stepNumber: "stepNumber", stepName: "stepName", timestamp: "timestamp", runVersion: "runVersion", promptText: "promptText", isFailed: "isFailed" }, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-font-inter\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\"\n    style=\"border: 1px solid #E4E4E499;\">\n\n    <!-- Header section: sparkle icon + step title + meta line -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"padding: 6px 12px; border-bottom: 1px solid #E4E4E499;\">\n      <svg class=\"cqa-ai-prompt-card__logo\" width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [ngStyle]=\"{ color: accentColor, 'flex-shrink': '0', 'margin-top': '2px' }\">\n        <path d=\"M9.01881 0C9.12979 0.0480032 9.17718 0.165227 9.22261 0.274119C9.24539 0.337566 9.26628 0.401358 9.28657 0.465659C9.29452 0.490298 9.30246 0.514938 9.31065 0.540324C9.41613 0.871899 9.51008 1.20702 9.60457 1.54191C9.62593 1.61751 9.64739 1.69308 9.66885 1.76865C9.7781 2.15341 9.88654 2.5384 9.99438 2.92356C10.0095 2.97765 10.0247 3.03175 10.0398 3.08584C10.0826 3.23834 10.1252 3.39085 10.1677 3.54344C10.2573 3.86586 10.3495 4.18733 10.4476 4.50724C10.4561 4.53523 10.4647 4.56321 10.4735 4.59205C10.7284 5.41499 11.0896 6.15257 11.6818 6.78081C11.6965 6.79715 11.7111 6.81349 11.7262 6.83032C11.979 7.10257 12.3034 7.32071 12.6276 7.49678C12.6441 7.5059 12.6606 7.51501 12.6776 7.5244C13.6317 8.04176 14.779 8.2693 15.8124 8.57217C16.2652 8.70496 16.7166 8.84194 17.1663 8.98495C17.1979 8.99499 17.2296 9.00502 17.2612 9.01503C17.3557 9.04495 17.45 9.07539 17.5442 9.10622C17.5662 9.11323 17.5882 9.12024 17.6108 9.12746C17.7406 9.17079 17.8648 9.22194 17.9713 9.31057C18.0038 9.38216 18.0038 9.38216 17.995 9.45376C17.8913 9.55776 17.7884 9.60653 17.6516 9.6541C17.632 9.66112 17.6124 9.66815 17.5923 9.67538C17.3612 9.7572 17.127 9.8288 16.8925 9.89975C16.8444 9.91442 16.7963 9.9291 16.7482 9.94378C16.4514 10.0341 16.1542 10.1226 15.8566 10.21C15.4646 10.3252 15.0733 10.4423 14.6822 10.5607C14.6182 10.5801 14.5541 10.5994 14.49 10.6187C14.1534 10.7199 13.8185 10.8248 13.4863 10.94C13.4587 10.9495 13.4312 10.959 13.4028 10.9688C12.2902 11.3595 11.4422 12.0884 10.9114 13.1543C10.6253 13.7534 10.4565 14.4012 10.2843 15.0405C10.2377 15.2131 10.1882 15.3846 10.1381 15.5561C10.0988 15.6911 10.0604 15.8262 10.023 15.9617C10.0185 15.9778 10.0141 15.9939 10.0095 16.0106C9.98788 16.0886 9.96638 16.1668 9.94503 16.2449C9.89039 16.443 9.83156 16.6395 9.77111 16.8359C9.66383 17.1849 9.5662 17.5365 9.46917 17.8885C9.32288 18.4185 9.32288 18.4185 9.23993 18.6733C9.23443 18.6904 9.22893 18.7076 9.22326 18.7252C9.19298 18.8159 9.16183 18.8994 9.10453 18.9761C9.01734 18.9955 9.01734 18.9955 8.93901 19C8.84946 18.8682 8.79016 18.7406 8.74265 18.5885C8.73574 18.567 8.72882 18.5454 8.7217 18.5232C8.63368 18.2452 8.55502 17.9644 8.47634 17.6836C8.45832 17.6194 8.44021 17.5552 8.42211 17.4911C8.2872 17.0127 8.15451 16.5337 8.02202 16.0546C7.47014 13.6847 7.47014 13.6847 6.078 11.7687C6.05569 11.7504 6.03338 11.732 6.01039 11.7131C5.09826 10.9757 3.89667 10.7027 2.7963 10.3827C2.52415 10.3035 2.2521 10.224 1.98006 10.1444C1.95628 10.1374 1.95628 10.1374 1.93201 10.1303C1.53962 10.0155 1.14735 9.90032 0.756448 9.78042C0.739911 9.77539 0.723375 9.77035 0.706338 9.76517C0.105798 9.58198 0.105798 9.58198 0.00129307 9.45376C-0.00166252 9.39559 -0.00166252 9.39559 0.0249378 9.33443C0.134167 9.22639 0.240153 9.18012 0.38432 9.13307C0.405194 9.12599 0.426068 9.11891 0.447574 9.11162C0.511506 9.09007 0.575577 9.069 0.639702 9.04805C0.658001 9.04198 0.676301 9.03592 0.695155 9.02968C0.82457 8.98684 0.95445 8.94561 1.08452 8.90485C1.11648 8.8948 1.11648 8.8948 1.14909 8.88454C1.70454 8.71017 2.26361 8.54789 2.82252 8.38525C3.23899 8.26404 3.65476 8.14082 4.06921 8.01269C4.08825 8.00683 4.1073 8.00097 4.12692 7.99493C5.087 7.69914 6.02557 7.27945 6.64547 6.44669C6.65475 6.43434 6.66403 6.42199 6.6736 6.40927C7.36395 5.48498 7.63315 4.36097 7.93391 3.26421C8.03285 2.90351 8.13298 2.54314 8.23345 2.18287C8.26127 2.0831 8.28906 1.98333 8.31673 1.88352C8.42788 1.48261 8.5407 1.08224 8.66 0.683712C8.67116 0.646393 8.68227 0.609057 8.69333 0.571704C8.86035 0.00841829 8.86035 0.00841828 9.01881 0Z\" fill=\"currentColor\"/>\n        <path d=\"M14.4717 1.17245C14.5802 1.29646 14.6019 1.4422 14.6357 1.60054C14.7485 2.09799 14.8783 2.55539 15.3291 2.84435C15.6072 2.99959 15.9386 3.07024 16.2468 3.13696C16.3768 3.16569 16.4867 3.20383 16.5982 3.28009C16.6234 3.32036 16.6234 3.32036 16.6219 3.39046C16.596 3.47572 16.5733 3.50321 16.5051 3.55901C16.4306 3.58419 16.4306 3.58419 16.3411 3.60376C16.3073 3.61161 16.2734 3.61954 16.2396 3.62753C16.2215 3.63178 16.2034 3.63602 16.1847 3.64039C15.6337 3.76904 15.6337 3.76904 15.1574 4.06019C15.1419 4.07277 15.1264 4.08536 15.1105 4.09832C14.7701 4.40129 14.6981 4.90525 14.5956 5.32743C14.5897 5.35062 14.5839 5.3738 14.5778 5.39769C14.5727 5.41822 14.5677 5.43874 14.5624 5.45989C14.5403 5.52256 14.5174 5.56343 14.4717 5.61146C14.3444 5.62777 14.3444 5.62777 14.2825 5.61146C14.1841 5.53443 14.162 5.44669 14.1363 5.3288C14.132 5.31054 14.1277 5.29229 14.1233 5.27348C14.1095 5.21517 14.0962 5.15678 14.083 5.09835C13.9793 4.64335 13.8623 4.19694 13.4488 3.93024C13.1256 3.74834 12.7327 3.66231 12.3715 3.59284C12.2725 3.57204 12.2158 3.54587 12.1545 3.46355C12.1412 3.38002 12.1412 3.38002 12.1545 3.29649C12.2487 3.19808 12.3478 3.17406 12.4752 3.14435C12.5153 3.13432 12.5554 3.12422 12.5955 3.11405C12.6163 3.10883 12.637 3.10361 12.6583 3.09824C12.764 3.07078 12.8686 3.04 12.9732 3.00861C12.9922 3.00305 13.0112 2.99749 13.0308 2.99175C13.2434 2.92759 13.4269 2.84553 13.5968 2.69985C13.6127 2.68669 13.6285 2.67352 13.6449 2.65995C13.9094 2.41969 13.9992 2.05873 14.0808 1.72192C14.087 1.69635 14.0932 1.67078 14.0997 1.64444C14.112 1.59308 14.1242 1.54165 14.1361 1.49018C14.1446 1.45436 14.1446 1.45436 14.1533 1.41782C14.1583 1.39643 14.1633 1.37503 14.1684 1.35298C14.1902 1.28487 14.2188 1.23138 14.2589 1.17245C14.336 1.13356 14.39 1.15114 14.4717 1.17245Z\" fill=\"currentColor\"/>\n        <path d=\"M3.5901 13.1885C3.61823 13.1887 3.61823 13.1887 3.64693 13.1889C3.84874 13.1951 3.9853 13.2604 4.13393 13.3974C4.30688 13.5859 4.38674 13.7987 4.3822 14.0528C4.36277 14.2589 4.24237 14.4388 4.09467 14.5781C3.92083 14.7198 3.74546 14.7666 3.52332 14.76C3.33602 14.738 3.15981 14.6482 3.02706 14.5131C2.86197 14.2857 2.8137 14.0772 2.8379 13.7971C2.88788 13.5766 3.03195 13.3976 3.21621 13.2721C3.34422 13.2066 3.44718 13.1873 3.5901 13.1885Z\" fill=\"currentColor\"/>\n      </svg>\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"gap: 2px;\">\n        <div class=\"cqa-font-semibold cqa-text-[12px]\" [ngStyle]=\"{ color: titleColor }\">\n          <span>{{ stepPrefix }}</span><span class=\"cqa-ai-prompt-card__step-name\" [innerHTML]=\"stepName\"></span>\n        </div>\n        <div class=\"cqa-text-[11px]\" style=\"color: #99999E;\">\n          {{ metaLine }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Body section: quoted prompt with left accent bar -->\n    <div style=\"padding: 6px 12px;\">\n      <div style=\"background-color: #F7F7FA; padding: 10px 12px;  border-radius: 6px;\"\n      [ngStyle]=\"{ 'border-left': '3px solid ' + accentColor }\">\n      <p class=\"cqa-text-xs cqa-italic cqa-m-0\"\n        style=\"color: #4C4C51; line-height: 20.4px;\">\n        \"<span class=\"cqa-ai-prompt-card__prompt-body\" [innerHTML]=\"promptText\"></span>\"\n      </p>\n    </div>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AiPromptCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-ai-prompt-card', template: "<div class=\"cqa-ui-root cqa-font-inter\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\"\n    style=\"border: 1px solid #E4E4E499;\">\n\n    <!-- Header section: sparkle icon + step title + meta line -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"padding: 6px 12px; border-bottom: 1px solid #E4E4E499;\">\n      <svg class=\"cqa-ai-prompt-card__logo\" width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [ngStyle]=\"{ color: accentColor, 'flex-shrink': '0', 'margin-top': '2px' }\">\n        <path d=\"M9.01881 0C9.12979 0.0480032 9.17718 0.165227 9.22261 0.274119C9.24539 0.337566 9.26628 0.401358 9.28657 0.465659C9.29452 0.490298 9.30246 0.514938 9.31065 0.540324C9.41613 0.871899 9.51008 1.20702 9.60457 1.54191C9.62593 1.61751 9.64739 1.69308 9.66885 1.76865C9.7781 2.15341 9.88654 2.5384 9.99438 2.92356C10.0095 2.97765 10.0247 3.03175 10.0398 3.08584C10.0826 3.23834 10.1252 3.39085 10.1677 3.54344C10.2573 3.86586 10.3495 4.18733 10.4476 4.50724C10.4561 4.53523 10.4647 4.56321 10.4735 4.59205C10.7284 5.41499 11.0896 6.15257 11.6818 6.78081C11.6965 6.79715 11.7111 6.81349 11.7262 6.83032C11.979 7.10257 12.3034 7.32071 12.6276 7.49678C12.6441 7.5059 12.6606 7.51501 12.6776 7.5244C13.6317 8.04176 14.779 8.2693 15.8124 8.57217C16.2652 8.70496 16.7166 8.84194 17.1663 8.98495C17.1979 8.99499 17.2296 9.00502 17.2612 9.01503C17.3557 9.04495 17.45 9.07539 17.5442 9.10622C17.5662 9.11323 17.5882 9.12024 17.6108 9.12746C17.7406 9.17079 17.8648 9.22194 17.9713 9.31057C18.0038 9.38216 18.0038 9.38216 17.995 9.45376C17.8913 9.55776 17.7884 9.60653 17.6516 9.6541C17.632 9.66112 17.6124 9.66815 17.5923 9.67538C17.3612 9.7572 17.127 9.8288 16.8925 9.89975C16.8444 9.91442 16.7963 9.9291 16.7482 9.94378C16.4514 10.0341 16.1542 10.1226 15.8566 10.21C15.4646 10.3252 15.0733 10.4423 14.6822 10.5607C14.6182 10.5801 14.5541 10.5994 14.49 10.6187C14.1534 10.7199 13.8185 10.8248 13.4863 10.94C13.4587 10.9495 13.4312 10.959 13.4028 10.9688C12.2902 11.3595 11.4422 12.0884 10.9114 13.1543C10.6253 13.7534 10.4565 14.4012 10.2843 15.0405C10.2377 15.2131 10.1882 15.3846 10.1381 15.5561C10.0988 15.6911 10.0604 15.8262 10.023 15.9617C10.0185 15.9778 10.0141 15.9939 10.0095 16.0106C9.98788 16.0886 9.96638 16.1668 9.94503 16.2449C9.89039 16.443 9.83156 16.6395 9.77111 16.8359C9.66383 17.1849 9.5662 17.5365 9.46917 17.8885C9.32288 18.4185 9.32288 18.4185 9.23993 18.6733C9.23443 18.6904 9.22893 18.7076 9.22326 18.7252C9.19298 18.8159 9.16183 18.8994 9.10453 18.9761C9.01734 18.9955 9.01734 18.9955 8.93901 19C8.84946 18.8682 8.79016 18.7406 8.74265 18.5885C8.73574 18.567 8.72882 18.5454 8.7217 18.5232C8.63368 18.2452 8.55502 17.9644 8.47634 17.6836C8.45832 17.6194 8.44021 17.5552 8.42211 17.4911C8.2872 17.0127 8.15451 16.5337 8.02202 16.0546C7.47014 13.6847 7.47014 13.6847 6.078 11.7687C6.05569 11.7504 6.03338 11.732 6.01039 11.7131C5.09826 10.9757 3.89667 10.7027 2.7963 10.3827C2.52415 10.3035 2.2521 10.224 1.98006 10.1444C1.95628 10.1374 1.95628 10.1374 1.93201 10.1303C1.53962 10.0155 1.14735 9.90032 0.756448 9.78042C0.739911 9.77539 0.723375 9.77035 0.706338 9.76517C0.105798 9.58198 0.105798 9.58198 0.00129307 9.45376C-0.00166252 9.39559 -0.00166252 9.39559 0.0249378 9.33443C0.134167 9.22639 0.240153 9.18012 0.38432 9.13307C0.405194 9.12599 0.426068 9.11891 0.447574 9.11162C0.511506 9.09007 0.575577 9.069 0.639702 9.04805C0.658001 9.04198 0.676301 9.03592 0.695155 9.02968C0.82457 8.98684 0.95445 8.94561 1.08452 8.90485C1.11648 8.8948 1.11648 8.8948 1.14909 8.88454C1.70454 8.71017 2.26361 8.54789 2.82252 8.38525C3.23899 8.26404 3.65476 8.14082 4.06921 8.01269C4.08825 8.00683 4.1073 8.00097 4.12692 7.99493C5.087 7.69914 6.02557 7.27945 6.64547 6.44669C6.65475 6.43434 6.66403 6.42199 6.6736 6.40927C7.36395 5.48498 7.63315 4.36097 7.93391 3.26421C8.03285 2.90351 8.13298 2.54314 8.23345 2.18287C8.26127 2.0831 8.28906 1.98333 8.31673 1.88352C8.42788 1.48261 8.5407 1.08224 8.66 0.683712C8.67116 0.646393 8.68227 0.609057 8.69333 0.571704C8.86035 0.00841829 8.86035 0.00841828 9.01881 0Z\" fill=\"currentColor\"/>\n        <path d=\"M14.4717 1.17245C14.5802 1.29646 14.6019 1.4422 14.6357 1.60054C14.7485 2.09799 14.8783 2.55539 15.3291 2.84435C15.6072 2.99959 15.9386 3.07024 16.2468 3.13696C16.3768 3.16569 16.4867 3.20383 16.5982 3.28009C16.6234 3.32036 16.6234 3.32036 16.6219 3.39046C16.596 3.47572 16.5733 3.50321 16.5051 3.55901C16.4306 3.58419 16.4306 3.58419 16.3411 3.60376C16.3073 3.61161 16.2734 3.61954 16.2396 3.62753C16.2215 3.63178 16.2034 3.63602 16.1847 3.64039C15.6337 3.76904 15.6337 3.76904 15.1574 4.06019C15.1419 4.07277 15.1264 4.08536 15.1105 4.09832C14.7701 4.40129 14.6981 4.90525 14.5956 5.32743C14.5897 5.35062 14.5839 5.3738 14.5778 5.39769C14.5727 5.41822 14.5677 5.43874 14.5624 5.45989C14.5403 5.52256 14.5174 5.56343 14.4717 5.61146C14.3444 5.62777 14.3444 5.62777 14.2825 5.61146C14.1841 5.53443 14.162 5.44669 14.1363 5.3288C14.132 5.31054 14.1277 5.29229 14.1233 5.27348C14.1095 5.21517 14.0962 5.15678 14.083 5.09835C13.9793 4.64335 13.8623 4.19694 13.4488 3.93024C13.1256 3.74834 12.7327 3.66231 12.3715 3.59284C12.2725 3.57204 12.2158 3.54587 12.1545 3.46355C12.1412 3.38002 12.1412 3.38002 12.1545 3.29649C12.2487 3.19808 12.3478 3.17406 12.4752 3.14435C12.5153 3.13432 12.5554 3.12422 12.5955 3.11405C12.6163 3.10883 12.637 3.10361 12.6583 3.09824C12.764 3.07078 12.8686 3.04 12.9732 3.00861C12.9922 3.00305 13.0112 2.99749 13.0308 2.99175C13.2434 2.92759 13.4269 2.84553 13.5968 2.69985C13.6127 2.68669 13.6285 2.67352 13.6449 2.65995C13.9094 2.41969 13.9992 2.05873 14.0808 1.72192C14.087 1.69635 14.0932 1.67078 14.0997 1.64444C14.112 1.59308 14.1242 1.54165 14.1361 1.49018C14.1446 1.45436 14.1446 1.45436 14.1533 1.41782C14.1583 1.39643 14.1633 1.37503 14.1684 1.35298C14.1902 1.28487 14.2188 1.23138 14.2589 1.17245C14.336 1.13356 14.39 1.15114 14.4717 1.17245Z\" fill=\"currentColor\"/>\n        <path d=\"M3.5901 13.1885C3.61823 13.1887 3.61823 13.1887 3.64693 13.1889C3.84874 13.1951 3.9853 13.2604 4.13393 13.3974C4.30688 13.5859 4.38674 13.7987 4.3822 14.0528C4.36277 14.2589 4.24237 14.4388 4.09467 14.5781C3.92083 14.7198 3.74546 14.7666 3.52332 14.76C3.33602 14.738 3.15981 14.6482 3.02706 14.5131C2.86197 14.2857 2.8137 14.0772 2.8379 13.7971C2.88788 13.5766 3.03195 13.3976 3.21621 13.2721C3.34422 13.2066 3.44718 13.1873 3.5901 13.1885Z\" fill=\"currentColor\"/>\n      </svg>\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"gap: 2px;\">\n        <div class=\"cqa-font-semibold cqa-text-[12px]\" [ngStyle]=\"{ color: titleColor }\">\n          <span>{{ stepPrefix }}</span><span class=\"cqa-ai-prompt-card__step-name\" [innerHTML]=\"stepName\"></span>\n        </div>\n        <div class=\"cqa-text-[11px]\" style=\"color: #99999E;\">\n          {{ metaLine }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Body section: quoted prompt with left accent bar -->\n    <div style=\"padding: 6px 12px;\">\n      <div style=\"background-color: #F7F7FA; padding: 10px 12px;  border-radius: 6px;\"\n      [ngStyle]=\"{ 'border-left': '3px solid ' + accentColor }\">\n      <p class=\"cqa-text-xs cqa-italic cqa-m-0\"\n        style=\"color: #4C4C51; line-height: 20.4px;\">\n        \"<span class=\"cqa-ai-prompt-card__prompt-body\" [innerHTML]=\"promptText\"></span>\"\n      </p>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { stepNumber: [{
+                type: Input
+            }], stepName: [{
+                type: Input
+            }], timestamp: [{
+                type: Input
+            }], runVersion: [{
+                type: Input
+            }], promptText: [{
+                type: Input
+            }], isFailed: [{
+                type: Input
+            }] } });
+
 class ConfigurationCardComponent {
     constructor() {
         this.data = [];
@@ -19401,6 +19437,312 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+const VAR_NAME_REGEX = /^[A-Za-z_][A-Za-z0-9_]*$/;
+const VAR_TOKEN_REGEX = /\$\{([A-Za-z_][A-Za-z0-9_]*)\}/g;
+class MixedVariableInputComponent {
+    constructor(cdr, hostRef) {
+        this.cdr = cdr;
+        this.hostRef = hostRef;
+        this.value = '';
+        this.placeholder = 'Text Input';
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+        this.showSuggestion = false;
+        this.pendingWord = '';
+        this.lastEmitted = '';
+    }
+    onDocumentMouseDown(event) {
+        if (!this.showSuggestion)
+            return;
+        const target = event.target;
+        if (this.hostRef.nativeElement.contains(target))
+            return;
+        this.hideSuggestion();
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (changes['value'] && this.editorRef) {
+            const incoming = (_a = changes['value'].currentValue) !== null && _a !== void 0 ? _a : '';
+            if (incoming !== this.lastEmitted) {
+                this.render(incoming);
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.render(this.value || '');
+    }
+    onInput() {
+        const str = this.serialize();
+        this.lastEmitted = str;
+        this.valueChange.emit(str);
+        this.autoChipify();
+        this.refreshSuggestion();
+    }
+    onKeyDown(event) {
+        var _a;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Escape') {
+            if (this.showSuggestion) {
+                event.preventDefault();
+                this.hideSuggestion();
+            }
+            return;
+        }
+        if (event.key === 'Backspace') {
+            const node = this.getNodeBeforeCaret();
+            if (node && ((_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains('cqa-var-chip'))) {
+                event.preventDefault();
+                node.remove();
+                this.onInput();
+            }
+        }
+    }
+    onEditorBlur() {
+        // Small timeout so clicks on suggestion buttons register before hiding.
+        setTimeout(() => this.hideSuggestion(), 150);
+    }
+    addAsText() {
+        this.hideSuggestion();
+        this.editorRef.nativeElement.focus();
+    }
+    addAsVariable() {
+        const name = (this.pendingWord || '').trim();
+        if (!name || !VAR_NAME_REGEX.test(name)) {
+            this.hideSuggestion();
+            return;
+        }
+        this.insertChipReplacingCurrentWord(name);
+        this.hideSuggestion();
+        const str = this.serialize();
+        this.lastEmitted = str;
+        this.valueChange.emit(str);
+    }
+    refreshSuggestion() {
+        const word = this.getCurrentWord();
+        if (word && VAR_NAME_REGEX.test(word)) {
+            this.pendingWord = word;
+            this.showSuggestion = true;
+        }
+        else {
+            this.pendingWord = '';
+            this.showSuggestion = false;
+        }
+        this.cdr.markForCheck();
+    }
+    hideSuggestion() {
+        if (!this.showSuggestion && !this.pendingWord)
+            return;
+        this.showSuggestion = false;
+        this.pendingWord = '';
+        this.cdr.markForCheck();
+    }
+    autoChipify() {
+        const editor = this.editorRef.nativeElement;
+        const textNodes = [];
+        editor.childNodes.forEach((n) => {
+            if (n.nodeType === Node.TEXT_NODE)
+                textNodes.push(n);
+        });
+        for (const tn of textNodes) {
+            const text = tn.nodeValue || '';
+            VAR_TOKEN_REGEX.lastIndex = 0;
+            if (!VAR_TOKEN_REGEX.test(text))
+                continue;
+            VAR_TOKEN_REGEX.lastIndex = 0;
+            const parent = tn.parentNode;
+            if (!parent)
+                continue;
+            const frag = document.createDocumentFragment();
+            let lastIndex = 0;
+            let m;
+            while ((m = VAR_TOKEN_REGEX.exec(text)) !== null) {
+                if (m.index > lastIndex) {
+                    frag.appendChild(document.createTextNode(text.slice(lastIndex, m.index)));
+                }
+                frag.appendChild(this.buildChip(m[1]));
+                lastIndex = m.index + m[0].length;
+            }
+            if (lastIndex < text.length) {
+                frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+            }
+            parent.replaceChild(frag, tn);
+            this.placeCaretAtEnd();
+            const str = this.serialize();
+            this.lastEmitted = str;
+            this.valueChange.emit(str);
+            return;
+        }
+    }
+    render(value) {
+        const editor = this.editorRef.nativeElement;
+        editor.innerHTML = '';
+        if (!value)
+            return;
+        VAR_TOKEN_REGEX.lastIndex = 0;
+        let lastIndex = 0;
+        let m;
+        while ((m = VAR_TOKEN_REGEX.exec(value)) !== null) {
+            if (m.index > lastIndex) {
+                editor.appendChild(document.createTextNode(value.slice(lastIndex, m.index)));
+            }
+            editor.appendChild(this.buildChip(m[1]));
+            lastIndex = m.index + m[0].length;
+        }
+        if (lastIndex < value.length) {
+            editor.appendChild(document.createTextNode(value.slice(lastIndex)));
+        }
+    }
+    serialize() {
+        const editor = this.editorRef.nativeElement;
+        let out = '';
+        editor.childNodes.forEach((n) => {
+            if (n.nodeType === Node.TEXT_NODE) {
+                out += (n.nodeValue || '').replace(/\u00a0/g, ' ');
+            }
+            else if (n.nodeType === Node.ELEMENT_NODE) {
+                const el = n;
+                if (el.classList.contains('cqa-var-chip')) {
+                    const name = el.getAttribute('data-var') || '';
+                    if (name)
+                        out += '${' + name + '}';
+                }
+                else {
+                    out += el.textContent || '';
+                }
+            }
+        });
+        return out;
+    }
+    buildChip(name) {
+        const chip = document.createElement('span');
+        chip.className = 'cqa-var-chip';
+        chip.setAttribute('contenteditable', 'false');
+        chip.setAttribute('data-var', name);
+        const label = document.createElement('span');
+        label.className = 'cqa-var-chip__label';
+        label.textContent = '${' + name + '}';
+        const remove = document.createElement('span');
+        remove.className = 'cqa-var-chip__remove';
+        remove.textContent = '×';
+        remove.addEventListener('mousedown', (e) => e.preventDefault());
+        remove.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            chip.remove();
+            this.onInput();
+        });
+        chip.appendChild(label);
+        chip.appendChild(remove);
+        return chip;
+    }
+    getSelectionRange() {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        const range = sel.getRangeAt(0);
+        if (!this.editorRef.nativeElement.contains(range.startContainer))
+            return null;
+        return range;
+    }
+    getNodeBeforeCaret() {
+        const range = this.getSelectionRange();
+        if (!range || !range.collapsed)
+            return null;
+        const { startContainer, startOffset } = range;
+        if (startContainer.nodeType === Node.TEXT_NODE) {
+            if (startOffset > 0)
+                return null;
+            return startContainer.previousSibling;
+        }
+        return startContainer.childNodes[startOffset - 1] || null;
+    }
+    getCurrentWord() {
+        const range = this.getSelectionRange();
+        if (!range)
+            return '';
+        const node = range.startContainer;
+        if (node.nodeType !== Node.TEXT_NODE)
+            return '';
+        const text = node.nodeValue || '';
+        const before = text.slice(0, range.startOffset);
+        const match = before.match(/([A-Za-z_][A-Za-z0-9_]*)$/);
+        return match ? match[1] : '';
+    }
+    insertChipReplacingCurrentWord(name) {
+        const range = this.getSelectionRange();
+        const chip = this.buildChip(name);
+        if (!range) {
+            this.editorRef.nativeElement.appendChild(chip);
+            this.placeCaretAfter(chip);
+            return;
+        }
+        const node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.nodeValue || '';
+            const before = text.slice(0, range.startOffset);
+            const after = text.slice(range.startOffset);
+            const wordMatch = before.match(/([A-Za-z_][A-Za-z0-9_]*)$/);
+            const beforeKept = wordMatch ? before.slice(0, before.length - wordMatch[1].length) : before;
+            const parent = node.parentNode;
+            const frag = document.createDocumentFragment();
+            if (beforeKept)
+                frag.appendChild(document.createTextNode(beforeKept));
+            frag.appendChild(chip);
+            if (after)
+                frag.appendChild(document.createTextNode(after));
+            parent.replaceChild(frag, node);
+        }
+        else {
+            range.insertNode(chip);
+        }
+        this.placeCaretAfter(chip);
+    }
+    placeCaretAfter(node) {
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        const range = document.createRange();
+        range.setStartAfter(node);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    placeCaretAtEnd() {
+        const editor = this.editorRef.nativeElement;
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+MixedVariableInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MixedVariableInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MixedVariableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-mixed-var-wrapper\">\n  <div\n    #editor\n    class=\"cqa-mixed-var-editor\"\n    role=\"textbox\"\n    spellcheck=\"false\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onEditorBlur()\">\n  </div>\n\n  <div\n    *ngIf=\"showSuggestion\"\n    class=\"cqa-mixed-var-suggest\"\n    (mousedown)=\"$event.preventDefault()\">\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item\" (click)=\"addAsText()\">\n      Add as Text <span class=\"cqa-mixed-var-suggest__hint\">\"{{ pendingWord }}\"</span>\n    </button>\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item cqa-mixed-var-suggest__item--primary\" (click)=\"addAsVariable()\">\n      Add as local variable <span class=\"cqa-mixed-var-suggest__hint\">${{ '{' }}{{ pendingWord }}{{ '}' }}</span>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;position:relative}.cqa-mixed-var-wrapper{position:relative;width:100%}.cqa-mixed-var-editor{width:100%;box-sizing:border-box;min-height:38px;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;font-size:14px;color:#111827;background:#fff;line-height:22px;outline:none;white-space:nowrap;overflow-x:auto;overflow-y:hidden;word-break:normal}.cqa-mixed-var-editor:focus{border-color:#6366f1;box-shadow:0 0 0 1px #6366f1}.cqa-mixed-var-editor:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}:host ::ng-deep .cqa-var-chip{display:inline-flex;align-items:center;gap:4px;margin:0 4px;padding:2px 4px 2px 8px;border-radius:6px;background-color:#eef0ff;border:1px solid #8a8cf4;color:#3730a3;font-size:12px;line-height:18px;-webkit-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}:host ::ng-deep .cqa-var-chip__label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}:host ::ng-deep .cqa-var-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:transparent;color:#6366f1;font-size:13px;line-height:1;cursor:pointer;transition:background-color .12s ease,color .12s ease}:host ::ng-deep .cqa-var-chip__remove:hover{background:#c7d2fe;color:#312e81}.cqa-mixed-var-suggest{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px #00000014;padding:4px;display:flex;flex-direction:column}.cqa-mixed-var-suggest__item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;padding:8px 10px;font-size:13px;color:#374151;background:#fff;border:none;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}.cqa-mixed-var-suggest__item:hover{background:#f3f4f6}.cqa-mixed-var-suggest__item--primary{color:#4338ca;font-weight:500}.cqa-mixed-var-suggest__hint{flex:1 1 auto;min-width:0;color:#9ca3af;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], directives: [{ 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: MixedVariableInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-mixed-variable-input', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-mixed-var-wrapper\">\n  <div\n    #editor\n    class=\"cqa-mixed-var-editor\"\n    role=\"textbox\"\n    spellcheck=\"false\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onEditorBlur()\">\n  </div>\n\n  <div\n    *ngIf=\"showSuggestion\"\n    class=\"cqa-mixed-var-suggest\"\n    (mousedown)=\"$event.preventDefault()\">\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item\" (click)=\"addAsText()\">\n      Add as Text <span class=\"cqa-mixed-var-suggest__hint\">\"{{ pendingWord }}\"</span>\n    </button>\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item cqa-mixed-var-suggest__item--primary\" (click)=\"addAsVariable()\">\n      Add as local variable <span class=\"cqa-mixed-var-suggest__hint\">${{ '{' }}{{ pendingWord }}{{ '}' }}</span>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;position:relative}.cqa-mixed-var-wrapper{position:relative;width:100%}.cqa-mixed-var-editor{width:100%;box-sizing:border-box;min-height:38px;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;font-size:14px;color:#111827;background:#fff;line-height:22px;outline:none;white-space:nowrap;overflow-x:auto;overflow-y:hidden;word-break:normal}.cqa-mixed-var-editor:focus{border-color:#6366f1;box-shadow:0 0 0 1px #6366f1}.cqa-mixed-var-editor:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}:host ::ng-deep .cqa-var-chip{display:inline-flex;align-items:center;gap:4px;margin:0 4px;padding:2px 4px 2px 8px;border-radius:6px;background-color:#eef0ff;border:1px solid #8a8cf4;color:#3730a3;font-size:12px;line-height:18px;-webkit-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}:host ::ng-deep .cqa-var-chip__label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}:host ::ng-deep .cqa-var-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:transparent;color:#6366f1;font-size:13px;line-height:1;cursor:pointer;transition:background-color .12s ease,color .12s ease}:host ::ng-deep .cqa-var-chip__remove:hover{background:#c7d2fe;color:#312e81}.cqa-mixed-var-suggest{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px #00000014;padding:4px;display:flex;flex-direction:column}.cqa-mixed-var-suggest__item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;padding:8px 10px;font-size:13px;color:#374151;background:#fff;border:none;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}.cqa-mixed-var-suggest__item:hover{background:#f3f4f6}.cqa-mixed-var-suggest__item--primary{color:#4338ca;font-weight:500}.cqa-mixed-var-suggest__hint{flex:1 1 auto;min-width:0;color:#9ca3af;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], editorRef: [{
+                type: ViewChild,
+                args: ['editor', { static: true }]
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
 class CustomTextareaComponent {
     constructor() {
         this.label = '';
@@ -34701,10 +35043,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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", 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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\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 | cqaCamelToTitle }}\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 !== 'textarea' && !(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 | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }} 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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}\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: ["inputId", "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"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", 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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\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 | cqaCamelToTitle }}\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 !== 'textarea' && !(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 | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }} 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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\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 | cqaCamelToTitle }}\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: ["inputId", "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: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange"] }, { 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"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, 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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\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 | cqaCamelToTitle }}\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 !== 'textarea' && !(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 | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }} 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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\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 | cqaCamelToTitle }}\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 !== 'textarea' && !(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 | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }} 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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\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 | cqaCamelToTitle }}\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: [{
@@ -44018,12 +44360,14 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         AiDebugAlertComponent,
         NetworkRequestComponent,
         RunHistoryCardComponent,
+        AiPromptCardComponent,
         VisualDifferenceModalComponent,
         ConfigurationCardComponent,
         CompareRunsComponent,
         IterationsLoopComponent,
         FailedStepCardComponent,
         CustomInputComponent,
+        MixedVariableInputComponent,
         CustomTextareaComponent,
         CodeEditorComponent,
         CustomToggleComponent,
@@ -44187,12 +44531,14 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         AiDebugAlertComponent,
         NetworkRequestComponent,
         RunHistoryCardComponent,
+        AiPromptCardComponent,
         VisualDifferenceModalComponent,
         ConfigurationCardComponent,
         CompareRunsComponent,
         IterationsLoopComponent,
         FailedStepCardComponent,
         CustomInputComponent,
+        MixedVariableInputComponent,
         CustomTextareaComponent,
         CodeEditorComponent,
         CustomToggleComponent,
@@ -44401,12 +44747,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         AiDebugAlertComponent,
                         NetworkRequestComponent,
                         RunHistoryCardComponent,
+                        AiPromptCardComponent,
                         VisualDifferenceModalComponent,
                         ConfigurationCardComponent,
                         CompareRunsComponent,
                         IterationsLoopComponent,
                         FailedStepCardComponent,
                         CustomInputComponent,
+                        MixedVariableInputComponent,
                         CustomTextareaComponent,
                         CodeEditorComponent,
                         CustomToggleComponent,
@@ -44576,12 +44924,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         AiDebugAlertComponent,
                         NetworkRequestComponent,
                         RunHistoryCardComponent,
+                        AiPromptCardComponent,
                         VisualDifferenceModalComponent,
                         ConfigurationCardComponent,
                         CompareRunsComponent,
                         IterationsLoopComponent,
                         FailedStepCardComponent,
                         CustomInputComponent,
+                        MixedVariableInputComponent,
                         CustomTextareaComponent,
                         CodeEditorComponent,
                         CustomToggleComponent,
@@ -45425,5 +45775,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map