@cqa-lib/cqa-ui 1.1.258 → 1.1.260

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/esm2020/lib/detail-side-panel/detail-side-panel.component.mjs +7 -3
  2. package/esm2020/lib/step-builder/advanced-variables-form/advanced-variables-form.component.mjs +107 -5
  3. package/esm2020/lib/step-builder/step-builder-action/step-builder-action.component.mjs +144 -18
  4. package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs +176 -6
  5. package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +102 -7
  6. package/esm2020/lib/step-builder/step-builder-document/step-builder-document.component.mjs +113 -7
  7. package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +7 -3
  8. package/esm2020/lib/step-builder/template-variables-form/template-variables-form.component.mjs +3 -3
  9. package/esm2020/lib/test-case-details/element-list/element-list.component.mjs +3 -3
  10. package/esm2020/lib/test-case-details/element-popup/element-form/element-form.component.mjs +3 -3
  11. package/esm2020/lib/test-case-details/element-popup/element-popup.component.mjs +6 -5
  12. package/esm2020/lib/test-case-details/loop-step/loop-step.component.mjs +7 -1
  13. package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +88 -13
  14. package/esm2020/lib/test-case-details/test-case-details.component.mjs +16 -3
  15. package/esm2020/lib/test-case-details/test-case-details.models.mjs +20 -10
  16. package/fesm2015/cqa-lib-cqa-ui.mjs +863 -141
  17. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  18. package/fesm2020/cqa-lib-cqa-ui.mjs +822 -121
  19. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  20. package/lib/detail-side-panel/detail-side-panel.component.d.ts +3 -1
  21. package/lib/step-builder/advanced-variables-form/advanced-variables-form.component.d.ts +43 -2
  22. package/lib/step-builder/step-builder-action/step-builder-action.component.d.ts +8 -1
  23. package/lib/step-builder/step-builder-condition/step-builder-condition.component.d.ts +14 -1
  24. package/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.d.ts +12 -2
  25. package/lib/step-builder/step-builder-document/step-builder-document.component.d.ts +15 -1
  26. package/lib/step-builder/step-builder-loop/step-builder-loop.component.d.ts +3 -1
  27. package/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.d.ts +5 -1
  28. package/lib/test-case-details/test-case-details.component.d.ts +7 -1
  29. package/lib/test-case-details/test-case-details.models.d.ts +2 -0
  30. package/package.json +1 -1
  31. package/styles.css +1 -1
package/fesm2015/cqa-lib-cqa-ui.mjs CHANGED
@@ -21,7 +21,7 @@ import * as i3$2 from '@angular/material/checkbox';
21
21
  import { MatCheckboxModule } from '@angular/material/checkbox';
22
22
  import * as i4 from '@angular/material/radio';
23
23
  import { MatRadioModule } from '@angular/material/radio';
24
- import * as i5$1 from '@angular/material/slide-toggle';
24
+ import * as i4$2 from '@angular/material/slide-toggle';
25
25
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
26
26
  import { MatDatepickerModule } from '@angular/material/datepicker';
27
27
  import * as i3$3 from '@angular/material/progress-spinner';
@@ -19296,10 +19296,10 @@ class ElementFormComponent {
19296
19296
  }
19297
19297
  }
19298
19298
  ElementFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, deps: [{ token: i1$1.FormBuilder, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
19299
- ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <span *ngFor=\"let tag of formLabels\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-full cqa-text-[12px] cqa-text-[#3F43EE]\">\n {{ tag }}\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a href=\"#\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19299
+ ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <span *ngFor=\"let tag of formLabels\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\">\n {{ tag }}\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a href=\"#\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19300
19300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, decorators: [{
19301
19301
  type: Component,
19302
- args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <span *ngFor=\"let tag of formLabels\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-full cqa-text-[12px] cqa-text-[#3F43EE]\">\n {{ tag }}\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a href=\"#\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n" }]
19302
+ args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <span *ngFor=\"let tag of formLabels\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\">\n {{ tag }}\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a href=\"#\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n" }]
19303
19303
  }], ctorParameters: function () {
19304
19304
  return [{ type: i1$1.FormBuilder, decorators: [{
19305
19305
  type: Optional
@@ -19424,10 +19424,10 @@ class ElementListComponent {
19424
19424
  }
19425
19425
  }
19426
19426
  ElementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
19427
- ElementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementListComponent, selector: "cqa-element-list", inputs: { items: "items", titleKey: "titleKey", selectorKey: "selectorKey", labelsKey: "labelsKey", maxHeight: "maxHeight", hasMore: "hasMore" }, outputs: { itemClick: "itemClick", loadMore: "loadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \n #scrollContainer\n class=\"cqa-max-h-[200px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB] cqa-flex cqa-flex-col cqa-gap-2\"\n [style.max-height]=\"maxHeight\">\n <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\">\n <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n cqa-rounded-lg cqa-p-3 cqa-cursor-pointer cqa-gap-1\">\n <div class=\"cqa-min-w-0 cqa-flex-1 cqa-break-words\">\n <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n {{ getItemValue(item, titleKey) }}\n </h6>\n <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n {{ getItemValue(item, selectorKey) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-gap-1 cqa-flex-shrink-0\">\n <span\n *ngFor=\"let tag of getItemValue(item, labelsKey)\"\n class=\"cqa-text-[10px] cqa-text-[#1447E6] cqa-rounded-[8px] cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff] cqa-whitespace-nowrap\">\n {{ tag }}\n </span>\n </div>\n </div>\n </div>\n <!-- No elements found message -->\n <div *ngIf=\"items.length === 0 && !hasMore\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-4 cqa-text-[12px] cqa-text-[#6B7280]\">\n No elements found\n </div>\n <!-- Sentinel element for infinite scroll -->\n <div *ngIf=\"hasMore\" class=\"load-more-sentinel cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-2\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">{{ items.length === 0 ? 'Loading...' : 'Loading more...' }}</span>\n </div>\n</div>\n\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19427
+ ElementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementListComponent, selector: "cqa-element-list", inputs: { items: "items", titleKey: "titleKey", selectorKey: "selectorKey", labelsKey: "labelsKey", maxHeight: "maxHeight", hasMore: "hasMore" }, outputs: { itemClick: "itemClick", loadMore: "loadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \n #scrollContainer\n class=\"cqa-max-h-[200px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB] cqa-flex cqa-items-center cqa-justify-center cqa-flex-col cqa-gap-2\"\n [style.max-height]=\"maxHeight\">\n <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\" class=\"cqa-w-full\">\n <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n cqa-rounded-lg cqa-p-3 cqa-cursor-pointer cqa-gap-1\">\n <div class=\"cqa-min-w-0 cqa-flex-1 cqa-break-words\">\n <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n {{ getItemValue(item, titleKey) }}\n </h6>\n <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n {{ getItemValue(item, selectorKey) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-gap-1 cqa-min-w-[80px] cqa-justify-end\">\n <span \n *ngFor=\"let tag of getItemValue(item, labelsKey)\" \n class=\"cqa-text-[11px] cqa-text-[#4b74ec] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ tag }}\n </span>\n </div>\n </div>\n </div>\n <!-- No elements found message -->\n <div *ngIf=\"items.length === 0 && !hasMore\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-4 cqa-text-[12px] cqa-text-[#6B7280]\">\n No elements found\n </div>\n <!-- Sentinel element for infinite scroll -->\n <div *ngIf=\"hasMore\" class=\"load-more-sentinel cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-2\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">{{ items.length === 0 ? 'Loading...' : 'Loading more...' }}</span>\n </div>\n</div>\n\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19428
19428
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementListComponent, decorators: [{
19429
19429
  type: Component,
19430
- args: [{ selector: 'cqa-element-list', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n #scrollContainer\n class=\"cqa-max-h-[200px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB] cqa-flex cqa-flex-col cqa-gap-2\"\n [style.max-height]=\"maxHeight\">\n <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\">\n <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n cqa-rounded-lg cqa-p-3 cqa-cursor-pointer cqa-gap-1\">\n <div class=\"cqa-min-w-0 cqa-flex-1 cqa-break-words\">\n <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n {{ getItemValue(item, titleKey) }}\n </h6>\n <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n {{ getItemValue(item, selectorKey) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-gap-1 cqa-flex-shrink-0\">\n <span\n *ngFor=\"let tag of getItemValue(item, labelsKey)\"\n class=\"cqa-text-[10px] cqa-text-[#1447E6] cqa-rounded-[8px] cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff] cqa-whitespace-nowrap\">\n {{ tag }}\n </span>\n </div>\n </div>\n </div>\n <!-- No elements found message -->\n <div *ngIf=\"items.length === 0 && !hasMore\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-4 cqa-text-[12px] cqa-text-[#6B7280]\">\n No elements found\n </div>\n <!-- Sentinel element for infinite scroll -->\n <div *ngIf=\"hasMore\" class=\"load-more-sentinel cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-2\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">{{ items.length === 0 ? 'Loading...' : 'Loading more...' }}</span>\n </div>\n</div>\n\n" }]
19430
+ args: [{ selector: 'cqa-element-list', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n #scrollContainer\n class=\"cqa-max-h-[200px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB] cqa-flex cqa-items-center cqa-justify-center cqa-flex-col cqa-gap-2\"\n [style.max-height]=\"maxHeight\">\n <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\" class=\"cqa-w-full\">\n <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n cqa-rounded-lg cqa-p-3 cqa-cursor-pointer cqa-gap-1\">\n <div class=\"cqa-min-w-0 cqa-flex-1 cqa-break-words\">\n <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n {{ getItemValue(item, titleKey) }}\n </h6>\n <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n {{ getItemValue(item, selectorKey) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-gap-1 cqa-min-w-[80px] cqa-justify-end\">\n <span \n *ngFor=\"let tag of getItemValue(item, labelsKey)\" \n class=\"cqa-text-[11px] cqa-text-[#4b74ec] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ tag }}\n </span>\n </div>\n </div>\n </div>\n <!-- No elements found message -->\n <div *ngIf=\"items.length === 0 && !hasMore\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-4 cqa-text-[12px] cqa-text-[#6B7280]\">\n No elements found\n </div>\n <!-- Sentinel element for infinite scroll -->\n <div *ngIf=\"hasMore\" class=\"load-more-sentinel cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-2\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">{{ items.length === 0 ? 'Loading...' : 'Loading more...' }}</span>\n </div>\n</div>\n\n" }]
19431
19431
  }], propDecorators: { scrollContainer: [{
19432
19432
  type: ViewChild,
19433
19433
  args: ['scrollContainer', { static: false }]
@@ -19669,10 +19669,10 @@ class ElementPopupComponent {
19669
19669
  }
19670
19670
  }
19671
19671
  ElementPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupComponent, deps: [{ token: CUSTOM_ELEMENT_POPUP_REF, optional: true }, { token: ELEMENT_POPUP_DATA, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
19672
- ElementPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementPopupComponent, selector: "cqa-element-popup", inputs: { value: "value", helpUrl: "helpUrl", labels: "labels", element: "element", elements: "elements", enableForm: "enableForm", isOnRecord: "isOnRecord", hasMoreElements: "hasMoreElements", elementId: "elementId", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", suggestedTags: "suggestedTags", isElementLoading: "isElementLoading", recentSearchedItems: "recentSearchedItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", searchElement: "searchElement", recentItemClick: "recentItemClick", loadMoreElements: "loadMoreElements", createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", formOpenRequest: "formOpenRequest", elementSelect: "elementSelect", toggleRecord: "toggleRecord" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "elementFormComponent", first: true, predicate: ElementFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\">\n <!-- Header: title left; Need help? + close icon right -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Element\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Need help? with custom tooltip (works inside overlay) -->\n <div class=\"cqa-relative cqa-inline-flex\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <ng-container *ngIf=\"enableForm && !isOnRecord\">\n <cqa-element-form\n #elementForm\n [elementId]=\"elementId\"\n [element]=\"element\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isElementLoading]=\"isElementLoading\"\n [isEditMode]=\"isEditMode\"\n [isCreateMode]=\"isCreateMode\"\n (createElement)=\"onElementFormCreate($event)\"\n (updateElement)=\"onElementFormUpdate($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (cancel)=\"onElementFormCancel()\"\n (editInDepth)=\"onEditInDepth()\">\n </cqa-element-form>\n </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n <!-- Video Icon -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n\n <!-- Title -->\n <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n Recording Mode Active\n </h4>\n\n <!-- Subtitle -->\n <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n Click on any element in the browser to capture it\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n [text]=\"'Cancel Recording'\"\n (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n </cqa-button>\n </div>\n</ng-container>\n\n\n <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n <!-- Selected -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between\n cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827]\">\n {{element.title}}\n </span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-flex-shrink-0\">\n <span *ngFor=\"let l of element.labels\"\n class=\"cqa-text-[10px] cqa-px-1.5\n cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff] cqa-whitespace-nowrap\">\n {{l}}\n </span>\n </div>\n </div>\n\n <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n {{element.selector}}\n </span>\n </div>\n <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n\n <!-- Recent -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n <div *ngFor=\"let item of recentSearchedItems\" \n class=\"cqa-cursor-pointer cqa-inline-block\"\n (click)=\"onRecentItemClick(item)\">\n <cqa-badge \n class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n [label]=\"item\"></cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Element Library -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar> \n </div>\n\n <cqa-element-list \n [items]=\"elements\"\n [titleKey]=\"'title'\"\n [selectorKey]=\"'selector'\"\n [labelsKey]=\"'labels'\"\n [maxHeight]=\"'200px'\"\n [hasMore]=\"hasMoreElements\"\n (itemClick)=\"onElementClick($event)\"\n (loadMore)=\"onLoadMoreElements()\">\n </cqa-element-list>\n</div>\n\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ElementListComponent, selector: "cqa-element-list", inputs: ["items", "titleKey", "selectorKey", "labelsKey", "maxHeight", "hasMore"], outputs: ["itemClick", "loadMore"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19672
+ ElementPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementPopupComponent, selector: "cqa-element-popup", inputs: { value: "value", helpUrl: "helpUrl", labels: "labels", element: "element", elements: "elements", enableForm: "enableForm", isOnRecord: "isOnRecord", hasMoreElements: "hasMoreElements", elementId: "elementId", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", suggestedTags: "suggestedTags", isElementLoading: "isElementLoading", recentSearchedItems: "recentSearchedItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", searchElement: "searchElement", recentItemClick: "recentItemClick", loadMoreElements: "loadMoreElements", createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", formOpenRequest: "formOpenRequest", elementSelect: "elementSelect", toggleRecord: "toggleRecord" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "elementFormComponent", first: true, predicate: ElementFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n <!-- Header: title left; Need help? + close icon right -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Element\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Need help? with custom tooltip (works inside overlay) -->\n <div class=\"cqa-relative cqa-inline-flex\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <ng-container *ngIf=\"enableForm && !isOnRecord\">\n <cqa-element-form\n #elementForm\n [elementId]=\"elementId\"\n [element]=\"element\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isElementLoading]=\"isElementLoading\"\n [isEditMode]=\"isEditMode\"\n [isCreateMode]=\"isCreateMode\"\n (createElement)=\"onElementFormCreate($event)\"\n (updateElement)=\"onElementFormUpdate($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (cancel)=\"onElementFormCancel()\"\n (editInDepth)=\"onEditInDepth()\">\n </cqa-element-form>\n </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n <!-- Video Icon -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n\n <!-- Title -->\n <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n Recording Mode Active\n </h4>\n\n <!-- Subtitle -->\n <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n Click on any element in the browser to capture it\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n [text]=\"'Cancel Recording'\"\n (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n </cqa-button>\n </div>\n</ng-container>\n\n\n <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n <!-- Selected -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between\n cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n [matTooltip]=\"element.title\"\n matTooltipPosition=\"above\">\n {{element.title}}\n </span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n <span *ngFor=\"let l of element.labels\"\n class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n [matTooltip]=\"l\"\n matTooltipPosition=\"above\">\n {{l}}\n </span>\n </div>\n </div>\n\n <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n {{element.selector}}\n </span>\n </div>\n <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n\n <!-- Recent -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n <div *ngFor=\"let item of recentSearchedItems\" \n class=\"cqa-cursor-pointer cqa-inline-block\"\n (click)=\"onRecentItemClick(item)\">\n <cqa-badge \n class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n [label]=\"item\"></cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Element Library -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar> \n </div>\n\n <cqa-element-list \n [items]=\"elements\"\n [titleKey]=\"'title'\"\n [selectorKey]=\"'selector'\"\n [labelsKey]=\"'labels'\"\n [maxHeight]=\"'200px'\"\n [hasMore]=\"hasMoreElements\"\n (itemClick)=\"onElementClick($event)\"\n (loadMore)=\"onLoadMoreElements()\">\n </cqa-element-list>\n</div>\n\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ElementListComponent, selector: "cqa-element-list", inputs: ["items", "titleKey", "selectorKey", "labelsKey", "maxHeight", "hasMore"], outputs: ["itemClick", "loadMore"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19673
19673
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupComponent, decorators: [{
19674
19674
  type: Component,
19675
- args: [{ selector: 'cqa-element-popup', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\">\n <!-- Header: title left; Need help? + close icon right -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Element\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Need help? with custom tooltip (works inside overlay) -->\n <div class=\"cqa-relative cqa-inline-flex\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <ng-container *ngIf=\"enableForm && !isOnRecord\">\n <cqa-element-form\n #elementForm\n [elementId]=\"elementId\"\n [element]=\"element\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isElementLoading]=\"isElementLoading\"\n [isEditMode]=\"isEditMode\"\n [isCreateMode]=\"isCreateMode\"\n (createElement)=\"onElementFormCreate($event)\"\n (updateElement)=\"onElementFormUpdate($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (cancel)=\"onElementFormCancel()\"\n (editInDepth)=\"onEditInDepth()\">\n </cqa-element-form>\n </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n <!-- Video Icon -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n\n <!-- Title -->\n <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n Recording Mode Active\n </h4>\n\n <!-- Subtitle -->\n <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n Click on any element in the browser to capture it\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n [text]=\"'Cancel Recording'\"\n (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n </cqa-button>\n </div>\n</ng-container>\n\n\n <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n <!-- Selected -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between\n cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827]\">\n {{element.title}}\n </span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-flex-shrink-0\">\n <span *ngFor=\"let l of element.labels\"\n class=\"cqa-text-[10px] cqa-px-1.5\n cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff] cqa-whitespace-nowrap\">\n {{l}}\n </span>\n </div>\n </div>\n\n <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n {{element.selector}}\n </span>\n </div>\n <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n\n <!-- Recent -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n <div *ngFor=\"let item of recentSearchedItems\" \n class=\"cqa-cursor-pointer cqa-inline-block\"\n (click)=\"onRecentItemClick(item)\">\n <cqa-badge \n class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n [label]=\"item\"></cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Element Library -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar> \n </div>\n\n <cqa-element-list \n [items]=\"elements\"\n [titleKey]=\"'title'\"\n [selectorKey]=\"'selector'\"\n [labelsKey]=\"'labels'\"\n [maxHeight]=\"'200px'\"\n [hasMore]=\"hasMoreElements\"\n (itemClick)=\"onElementClick($event)\"\n (loadMore)=\"onLoadMoreElements()\">\n </cqa-element-list>\n</div>\n\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n</div>\n" }]
19675
+ args: [{ selector: 'cqa-element-popup', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n <!-- Header: title left; Need help? + close icon right -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Element\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Need help? with custom tooltip (works inside overlay) -->\n <div class=\"cqa-relative cqa-inline-flex\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <ng-container *ngIf=\"enableForm && !isOnRecord\">\n <cqa-element-form\n #elementForm\n [elementId]=\"elementId\"\n [element]=\"element\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isElementLoading]=\"isElementLoading\"\n [isEditMode]=\"isEditMode\"\n [isCreateMode]=\"isCreateMode\"\n (createElement)=\"onElementFormCreate($event)\"\n (updateElement)=\"onElementFormUpdate($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (cancel)=\"onElementFormCancel()\"\n (editInDepth)=\"onEditInDepth()\">\n </cqa-element-form>\n </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n <!-- Video Icon -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n\n <!-- Title -->\n <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n Recording Mode Active\n </h4>\n\n <!-- Subtitle -->\n <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n Click on any element in the browser to capture it\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n [text]=\"'Cancel Recording'\"\n (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n </cqa-button>\n </div>\n</ng-container>\n\n\n <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n <!-- Selected -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between\n cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n [matTooltip]=\"element.title\"\n matTooltipPosition=\"above\">\n {{element.title}}\n </span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n <span *ngFor=\"let l of element.labels\"\n class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n [matTooltip]=\"l\"\n matTooltipPosition=\"above\">\n {{l}}\n </span>\n </div>\n </div>\n\n <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n {{element.selector}}\n </span>\n </div>\n <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n\n <!-- Recent -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n <div *ngFor=\"let item of recentSearchedItems\" \n class=\"cqa-cursor-pointer cqa-inline-block\"\n (click)=\"onRecentItemClick(item)\">\n <cqa-badge \n class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n [label]=\"item\"></cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Element Library -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar> \n </div>\n\n <cqa-element-list \n [items]=\"elements\"\n [titleKey]=\"'title'\"\n [selectorKey]=\"'selector'\"\n [labelsKey]=\"'labels'\"\n [maxHeight]=\"'200px'\"\n [hasMore]=\"hasMoreElements\"\n (itemClick)=\"onElementClick($event)\"\n (loadMore)=\"onLoadMoreElements()\">\n </cqa-element-list>\n</div>\n\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n</div>\n" }]
19676
19676
  }], ctorParameters: function () {
19677
19677
  return [{ type: ElementPopupRef, decorators: [{
19678
19678
  type: Optional
@@ -21941,6 +21941,9 @@ class TestCaseLoopStepComponent {
21941
21941
  const start = this.getDisplayStartIndex();
21942
21942
  if (start == null)
21943
21943
  return `Start: ${(_b = (_a = this.nestedSteps[0]) === null || _a === void 0 ? void 0 : _a.stepNumber) !== null && _b !== void 0 ? _b : 1}`;
21944
+ // If start is -1, user selected "Start" option, just return "Start"
21945
+ if (start === -1)
21946
+ return 'Start';
21944
21947
  const name = this.getDataRowNameForOneBasedIndex(start);
21945
21948
  return name != null ? `Start: ${name}` : `Start: ${start}`;
21946
21949
  }
@@ -21951,6 +21954,9 @@ class TestCaseLoopStepComponent {
21951
21954
  const defaultEnd = (_b = (_a = this.nestedSteps[this.nestedSteps.length - 1]) === null || _a === void 0 ? void 0 : _a.stepNumber) !== null && _b !== void 0 ? _b : this.nestedSteps.length;
21952
21955
  return `End: ${defaultEnd}`;
21953
21956
  }
21957
+ // If end is -1, user selected "End" option, just return "End"
21958
+ if (end === -1)
21959
+ return 'End';
21954
21960
  const name = this.getDataRowNameForOneBasedIndex(end);
21955
21961
  return name != null ? `End: ${name}` : `End: ${end}`;
21956
21962
  }
@@ -22275,7 +22281,7 @@ class TestCaseLoopStepComponent {
22275
22281
  /** Default max for Loop Start / End when no profile selected (options 1..10) */
22276
22282
  TestCaseLoopStepComponent.DEFAULT_LOOP_OPTIONS_MAX = 10;
22277
22283
  TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
22278
- TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n <ng-container *ngIf=\"isWhileLoop()\">\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"whileConditionAutocompleteOptions\"\n [value]=\"editForm.get('condition')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n (optionSelect)=\"onConditionSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\">\n </cqa-autocomplete>\n <!-- Template variables (shown when template is selected, same as condition-step) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">{{ variable.label }}</label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select\n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-loop-step\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Controls (only show Test Data profile / Start / End when values are set) -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getTestDataProfileLabel() }}\n </button>\n\n <!-- Start Button -->\n <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getStartStepLabel() }}\n </button>\n\n <!-- End Button -->\n <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getEndStepLabel() }}\n </button>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n <span class=\"cqa-text-gray-700 cqa-text-sm\">\n While\n </span>\n <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" title=\"Add step\"\n class=\"loop-step-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END Marker -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
22284
+ TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n <ng-container *ngIf=\"isWhileLoop()\">\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"whileConditionAutocompleteOptions\"\n [value]=\"editForm.get('condition')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n (optionSelect)=\"onConditionSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\">\n </cqa-autocomplete>\n <!-- Template variables (shown when template is selected, same as condition-step) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">{{ variable.label }}</label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select\n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-loop-step\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Controls (only show Test Data profile / Start / End when values are set) -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getTestDataProfileLabel() }}\n </button>\n\n <!-- Start Button -->\n <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getStartStepLabel() }}\n </button>\n\n <!-- End Button -->\n <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getEndStepLabel() }}\n </button>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n <span class=\"cqa-text-gray-700 cqa-text-sm\">\n While\n </span>\n <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" title=\"Add step\"\n class=\"loop-step-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END Marker -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
22279
22285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
22280
22286
  type: Component,
22281
22287
  args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [
@@ -23183,7 +23189,7 @@ class TestCaseConditionStepComponent {
23183
23189
  }
23184
23190
  }
23185
23191
  TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
23186
- TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - always visible -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE IF\n </button>\n <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label> -->\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n IF / ELSE\n </span>\n\n <!-- Condition Input and event key-value details (exclude customEvent) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n <span [innerHTML]=\"condition\"></span>\n <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n \n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\">\n <!-- Branch Header (2 = ELSE IF, 3 = ELSE; sub steps show 1.1, 2.1, 3.1 from step config) -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ branchIndex + 1 }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
23192
+ TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - always visible -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE IF\n </button>\n <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label> -->\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n IF / ELSE\n </span>\n\n <!-- Condition Input and event key-value details (exclude customEvent) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n <span [innerHTML]=\"condition\"></span>\n <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n \n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\">\n <!-- Branch Header (2 = ELSE IF, 3 = ELSE; sub steps show 1.1, 2.1, 3.1 from step config) -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ branchIndex + 1 }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
23187
23193
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
23188
23194
  type: Component,
23189
23195
  args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
@@ -28868,10 +28874,10 @@ class TemplateVariablesFormComponent {
28868
28874
  }
28869
28875
  }
28870
28876
  TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
28871
- 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", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", 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", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\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\">\n Screen Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} \n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28877
+ 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", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", 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", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Screen Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} \n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28872
28878
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
28873
28879
  type: Component,
28874
- args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\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\">\n Screen Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} \n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: [] }]
28880
+ args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Screen Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} \n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"] }]
28875
28881
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
28876
28882
  type: Input
28877
28883
  }], variablesForm: [{
@@ -28948,6 +28954,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
28948
28954
  type: Input
28949
28955
  }] } });
28950
28956
 
28957
+ class AdvancedVariablesFormComponent {
28958
+ constructor() {
28959
+ this.advancedVariables = [];
28960
+ this.advancedVariableForm = new FormArray([]);
28961
+ this.variableBooleanChange = new EventEmitter();
28962
+ this.variableValueChange = new EventEmitter();
28963
+ }
28964
+ ngOnChanges(changes) {
28965
+ // Handle changes if needed
28966
+ if (changes['advancedVariables'] || changes['advancedVariableForm']) {
28967
+ // Form is managed by parent component
28968
+ }
28969
+ }
28970
+ /**
28971
+ * Get the FormGroup at a specific index
28972
+ */
28973
+ getFormGroupAt(index) {
28974
+ if (this.advancedVariableForm && index >= 0 && index < this.advancedVariableForm.length) {
28975
+ const control = this.advancedVariableForm.at(index);
28976
+ return control instanceof FormGroup ? control : null;
28977
+ }
28978
+ return null;
28979
+ }
28980
+ /**
28981
+ * Get the value from form or variable
28982
+ */
28983
+ getBooleanValue(variable, index) {
28984
+ var _a;
28985
+ const formGroup = this.getFormGroupAt(index);
28986
+ if (formGroup) {
28987
+ const value = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
28988
+ return value !== null && value !== undefined ? value : variable.value || false;
28989
+ }
28990
+ return variable.value || false;
28991
+ }
28992
+ /**
28993
+ * Get the value from form or variable (for non-boolean types)
28994
+ */
28995
+ getValue(variable, index) {
28996
+ var _a;
28997
+ const formGroup = this.getFormGroupAt(index);
28998
+ if (formGroup) {
28999
+ const value = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
29000
+ return value !== null && value !== undefined ? value : variable.value;
29001
+ }
29002
+ return variable.value;
29003
+ }
29004
+ /**
29005
+ * Check if variable is boolean type
29006
+ */
29007
+ isBooleanType(variable) {
29008
+ return variable.type !== 'str_list' && typeof variable.value === 'boolean';
29009
+ }
29010
+ /**
29011
+ * Check if variable is str_list type
29012
+ */
29013
+ isStrListType(variable) {
29014
+ return variable.type === 'str_list';
29015
+ }
29016
+ /**
29017
+ * Handle boolean value change
29018
+ */
29019
+ onVariableBooleanChange(variableName, value) {
29020
+ this.variableBooleanChange.emit({ name: variableName, value });
29021
+ }
29022
+ /**
29023
+ * Handle value change for non-boolean types
29024
+ */
29025
+ onVariableValueChange(variableName, value) {
29026
+ this.variableValueChange.emit({ name: variableName, value });
29027
+ }
29028
+ /**
29029
+ * Handle adding a new item to str_list
29030
+ */
29031
+ addStrListItem(variable, index) {
29032
+ const formGroup = this.getFormGroupAt(index);
29033
+ if (formGroup) {
29034
+ const valueControl = formGroup.get('value');
29035
+ if (valueControl instanceof FormArray) {
29036
+ valueControl.push(new FormControl(''));
29037
+ // Emit the updated value
29038
+ const currentValue = valueControl.value;
29039
+ this.onVariableValueChange(variable.name, currentValue);
29040
+ }
29041
+ else {
29042
+ console.error('Expected FormArray for str_list variable, got:', valueControl);
29043
+ }
29044
+ }
29045
+ }
29046
+ /**
29047
+ * Handle removing an item from str_list
29048
+ */
29049
+ removeStrListItem(variable, index, itemIndex) {
29050
+ const formGroup = this.getFormGroupAt(index);
29051
+ if (formGroup) {
29052
+ const valueControl = formGroup.get('value');
29053
+ if (valueControl instanceof FormArray && itemIndex >= 0 && itemIndex < valueControl.length) {
29054
+ valueControl.removeAt(itemIndex);
29055
+ // Emit the updated value
29056
+ const currentValue = valueControl.value;
29057
+ this.onVariableValueChange(variable.name, currentValue);
29058
+ }
29059
+ }
29060
+ }
29061
+ /**
29062
+ * Handle str_list item value change
29063
+ */
29064
+ onStrListItemChange(variable, index, itemIndex, value) {
29065
+ const formGroup = this.getFormGroupAt(index);
29066
+ if (formGroup) {
29067
+ const valueControl = formGroup.get('value');
29068
+ if (valueControl instanceof FormArray && itemIndex >= 0 && itemIndex < valueControl.length) {
29069
+ // Use emitEvent: false to prevent triggering change detection that causes focus loss
29070
+ valueControl.at(itemIndex).setValue(value, { emitEvent: false });
29071
+ // Emit the updated value after a short delay to avoid focus issues
29072
+ setTimeout(() => {
29073
+ const currentValue = valueControl.value;
29074
+ this.onVariableValueChange(variable.name, currentValue);
29075
+ }, 0);
29076
+ }
29077
+ }
29078
+ }
29079
+ /**
29080
+ * Get FormArray for str_list variable
29081
+ */
29082
+ getStrListFormArray(variable, index) {
29083
+ const formGroup = this.getFormGroupAt(index);
29084
+ if (formGroup) {
29085
+ const formArray = formGroup.get('value');
29086
+ return formArray instanceof FormArray ? formArray : null;
29087
+ }
29088
+ return null;
29089
+ }
29090
+ /**
29091
+ * Track by function for ngFor
29092
+ */
29093
+ trackByVariable(index, variable) {
29094
+ return variable.name || index.toString();
29095
+ }
29096
+ /**
29097
+ * Track by function for form controls in str_list
29098
+ */
29099
+ trackByControl(index, control) {
29100
+ return control || index;
29101
+ }
29102
+ }
29103
+ AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
29104
+ AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input \n [placeholder]=\"'Enter locator'\" \n [value]=\"control.value\" \n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", components: [{ type: i4$2.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
29105
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
29106
+ type: Component,
29107
+ args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input \n [placeholder]=\"'Enter locator'\" \n [value]=\"control.value\" \n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", styles: [] }]
29108
+ }], propDecorators: { advancedVariables: [{
29109
+ type: Input
29110
+ }], advancedVariableForm: [{
29111
+ type: Input
29112
+ }], variableBooleanChange: [{
29113
+ type: Output
29114
+ }], variableValueChange: [{
29115
+ type: Output
29116
+ }] } });
29117
+
28951
29118
  class StepBuilderActionComponent {
28952
29119
  constructor(fb) {
28953
29120
  this.fb = fb;
@@ -28958,6 +29125,8 @@ class StepBuilderActionComponent {
28958
29125
  this.searchPlaceholder = 'Search library';
28959
29126
  /** Function to handle variable processing or custom logic. Can be passed from parent component. */
28960
29127
  this.setTemplateVariables = () => { return []; };
29128
+ /** Function to handle advanced settings variables. Can be passed from parent component. */
29129
+ this.setAdvancedSettingsVariables = () => { return []; };
28961
29130
  this.preventSelectTemplate = ['databaseverification'];
28962
29131
  this.elementOptions = []; // Element objects for element dropdown
28963
29132
  this.hasMoreElements = false; // Whether more elements are available
@@ -29003,8 +29172,9 @@ class StepBuilderActionComponent {
29003
29172
  this.selectedTemplate = null;
29004
29173
  this.metadata = '';
29005
29174
  this.description = '';
29006
- this.advancedExpanded = false;
29175
+ this.advancedExpanded = true;
29007
29176
  this.templateVariables = [];
29177
+ this.advancedSettingsVariables = [];
29008
29178
  this.updatedHtmlGrammar = ''; // Updated HTML grammar with variable values
29009
29179
  this.createElementVisible = false;
29010
29180
  // Cache for select configs to avoid recalculating on every change detection
@@ -29013,6 +29183,7 @@ class StepBuilderActionComponent {
29013
29183
  this.lastFormValidationTime = 0;
29014
29184
  this.FORM_VALIDATION_CACHE_MS = 100; // Cache for 100ms
29015
29185
  this.variablesForm = this.fb.array([]);
29186
+ this.advancedVariablesForm = this.fb.array([]);
29016
29187
  }
29017
29188
  /**
29018
29189
  * Handle element form visibility change
@@ -29104,6 +29275,12 @@ class StepBuilderActionComponent {
29104
29275
  this.buildVariablesForm();
29105
29276
  // Initialize updated HTML grammar
29106
29277
  this.updateHtmlGrammar();
29278
+ // Initialize advanced settings variables
29279
+ if (this.setAdvancedSettingsVariables) {
29280
+ this.advancedSettingsVariables = this.setAdvancedSettingsVariables(template);
29281
+ console.log("advancedSettingsVariables", this.advancedSettingsVariables);
29282
+ this.buildAdvancedVariablesForm();
29283
+ }
29107
29284
  }
29108
29285
  catch (error) {
29109
29286
  console.error('Error processing template variables:', error);
@@ -29113,6 +29290,11 @@ class StepBuilderActionComponent {
29113
29290
  else {
29114
29291
  // Initialize with template's HTML grammar if no variables
29115
29292
  this.updatedHtmlGrammar = template.htmlGrammar || template.naturalText || '';
29293
+ // Initialize advanced settings variables even if no template variables
29294
+ if (this.setAdvancedSettingsVariables) {
29295
+ this.advancedSettingsVariables = this.setAdvancedSettingsVariables(template);
29296
+ this.buildAdvancedVariablesForm();
29297
+ }
29116
29298
  }
29117
29299
  }
29118
29300
  buildVariablesForm() {
@@ -29168,6 +29350,40 @@ class StepBuilderActionComponent {
29168
29350
  this.formValidCache = false;
29169
29351
  });
29170
29352
  }
29353
+ buildAdvancedVariablesForm() {
29354
+ // Clear existing form array
29355
+ while (this.advancedVariablesForm.length !== 0) {
29356
+ this.advancedVariablesForm.removeAt(0);
29357
+ }
29358
+ // Add form groups for each advanced variable
29359
+ this.advancedSettingsVariables.forEach(variable => {
29360
+ // Handle different types
29361
+ let defaultValue;
29362
+ if (variable.type === 'str_list') {
29363
+ // For str_list, create a FormArray
29364
+ const valueArray = Array.isArray(variable.value) ? variable.value : [];
29365
+ const formArray = this.fb.array(valueArray.length > 0
29366
+ ? valueArray.map((item) => this.fb.control(item))
29367
+ : [this.fb.control('')] // Start with one empty control
29368
+ );
29369
+ defaultValue = formArray;
29370
+ }
29371
+ else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
29372
+ defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
29373
+ }
29374
+ else {
29375
+ defaultValue = variable.value || '';
29376
+ }
29377
+ // Create a FormGroup for each variable
29378
+ const variableGroup = this.fb.group({
29379
+ name: [variable.name],
29380
+ value: variable.type === 'str_list' ? defaultValue : [defaultValue],
29381
+ type: [variable.type || 'string'],
29382
+ label: [variable.label || '']
29383
+ });
29384
+ this.advancedVariablesForm.push(variableGroup);
29385
+ });
29386
+ }
29171
29387
  ngOnDestroy() {
29172
29388
  // Clean up subscription to prevent memory leaks
29173
29389
  if (this.formValueChangesSubscription) {
@@ -29287,17 +29503,52 @@ class StepBuilderActionComponent {
29287
29503
  // Update HTML grammar with new value
29288
29504
  this.updateHtmlGrammar();
29289
29505
  }
29506
+ onAdvancedVariableBooleanChange(variableName, value) {
29507
+ var _a;
29508
+ // Update the variable in advancedSettingsVariables array
29509
+ const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
29510
+ if (variable) {
29511
+ variable.value = value;
29512
+ }
29513
+ // Also update form array
29514
+ const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
29515
+ if (variableIndex !== -1) {
29516
+ (_a = this.advancedVariablesForm.at(variableIndex).get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
29517
+ }
29518
+ }
29519
+ onAdvancedVariableValueChange(variableName, value) {
29520
+ var _a;
29521
+ // Update the variable in advancedSettingsVariables array
29522
+ const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
29523
+ if (variable) {
29524
+ variable.value = value;
29525
+ }
29526
+ // Also update form array
29527
+ const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
29528
+ if (variableIndex !== -1) {
29529
+ const formGroup = this.advancedVariablesForm.at(variableIndex);
29530
+ // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
29531
+ // so we don't need to rebuild or update it here to avoid focus loss.
29532
+ if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
29533
+ (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
29534
+ }
29535
+ }
29536
+ }
29290
29537
  onBack() {
29291
29538
  this.selectedTemplate = null;
29292
29539
  this.metadata = '';
29293
29540
  this.description = '';
29294
29541
  this.advancedExpanded = false;
29295
29542
  this.templateVariables = [];
29543
+ this.advancedSettingsVariables = [];
29296
29544
  this.updatedHtmlGrammar = '';
29297
- // Clear form array
29545
+ // Clear form arrays
29298
29546
  while (this.variablesForm.length !== 0) {
29299
29547
  this.variablesForm.removeAt(0);
29300
29548
  }
29549
+ while (this.advancedVariablesForm.length !== 0) {
29550
+ this.advancedVariablesForm.removeAt(0);
29551
+ }
29301
29552
  // Reapply filter to maintain search state
29302
29553
  this.applyFilter();
29303
29554
  }
@@ -29345,15 +29596,32 @@ class StepBuilderActionComponent {
29345
29596
  }
29346
29597
  // Get environment IDs from template variables (if any environment type variables are selected)
29347
29598
  const environmentIds = ((_a = this.templateVariablesForm) === null || _a === void 0 ? void 0 : _a.getEnvironmentIdsForVariables()) || new Map();
29599
+ // Sync advanced variables from form to array
29600
+ this.advancedSettingsVariables.forEach((variable, index) => {
29601
+ var _a;
29602
+ const formGroup = this.advancedVariablesForm.at(index);
29603
+ if (formGroup) {
29604
+ const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
29605
+ if (variable.type === 'str_list' && formValue instanceof FormArray) {
29606
+ // Extract values from FormArray
29607
+ variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
29608
+ }
29609
+ else {
29610
+ variable.value = formValue;
29611
+ }
29612
+ }
29613
+ });
29348
29614
  const stepData = {
29349
29615
  template: this.selectedTemplate,
29350
29616
  metadata: this.metadata,
29351
29617
  description: this.description,
29352
29618
  templateVariables: this.templateVariables,
29619
+ advancedSettingsVariables: this.advancedSettingsVariables,
29353
29620
  environmentIds: environmentIds // Map of variable name to environment ID
29354
29621
  };
29355
29622
  console.log("stepData", stepData);
29356
29623
  console.log("variablesForm", this.variablesForm.value);
29624
+ console.log("advancedVariablesForm", this.advancedVariablesForm.value);
29357
29625
  console.log("environmentIds", environmentIds);
29358
29626
  this.createStep.emit(stepData);
29359
29627
  }
@@ -29394,15 +29662,32 @@ class StepBuilderActionComponent {
29394
29662
  valueStr = variable.value ? 'true' : 'false';
29395
29663
  }
29396
29664
  else if (variable.dataKey === 'element' && variable.name !== 'selector') {
29397
- valueStr = String(variable.elementName);
29665
+ // Only use elementName if it's defined and not empty
29666
+ if (variable.elementName !== undefined && variable.elementName !== null && variable.elementName !== '') {
29667
+ valueStr = String(variable.elementName);
29668
+ }
29669
+ else {
29670
+ // Skip this variable - don't add to map if element is not selected
29671
+ return;
29672
+ }
29398
29673
  }
29399
29674
  else if (variable.dataKey === 'element' && variable.name === 'selector') {
29400
- valueStr = String(variable.elementLocator || '');
29675
+ // Only use elementLocator if it's defined and not empty
29676
+ if (variable.elementLocator !== undefined && variable.elementLocator !== null && variable.elementLocator !== '') {
29677
+ valueStr = String(variable.elementLocator);
29678
+ }
29679
+ else {
29680
+ // Skip this variable - don't add to map if element locator is not available
29681
+ return;
29682
+ }
29401
29683
  }
29402
29684
  else {
29403
29685
  valueStr = String(variable.value || '');
29404
29686
  }
29405
- valueMap.set(variable.name, valueStr);
29687
+ // Only add to map if valueStr is not empty and not "undefined"
29688
+ if (valueStr && valueStr !== 'undefined' && valueStr.trim() !== '') {
29689
+ valueMap.set(variable.name, valueStr);
29690
+ }
29406
29691
  }
29407
29692
  });
29408
29693
  }
@@ -29417,8 +29702,12 @@ class StepBuilderActionComponent {
29417
29702
  const eventKey = span.getAttribute('data-event-key');
29418
29703
  if (eventKey && valueMap.has(eventKey)) {
29419
29704
  const value = valueMap.get(eventKey);
29420
- // Preserve the span structure but update the content
29421
- span.innerHTML = value || '';
29705
+ // Only update if value is valid (not undefined, not empty)
29706
+ if (value && value !== 'undefined' && value.trim() !== '') {
29707
+ // Preserve the span structure but update the content
29708
+ span.innerHTML = value;
29709
+ }
29710
+ // If value is invalid, leave the span content as is (don't replace with undefined)
29422
29711
  }
29423
29712
  });
29424
29713
  this.updatedHtmlGrammar = tempDiv.innerHTML;
@@ -29433,12 +29722,15 @@ class StepBuilderActionComponent {
29433
29722
  // Fallback: simple string replacement for server-side rendering
29434
29723
  let updatedHtml = String(htmlGrammar);
29435
29724
  valueMap.forEach((value, key) => {
29436
- // Replace spans with data-event-key matching the variable name
29437
- const regex = new RegExp(`<span[^>]*data-event-key="${key}"[^>]*>.*?</span>`, 'gi');
29438
- updatedHtml = updatedHtml.replace(regex, (match) => {
29439
- // Replace the content inside the span
29440
- return match.replace(/>.*?</, `>${value}<`);
29441
- });
29725
+ // Only replace if value is valid (not undefined, not empty)
29726
+ if (value && value !== 'undefined' && value.trim() !== '') {
29727
+ // Replace spans with data-event-key matching the variable name
29728
+ const regex = new RegExp(`<span[^>]*data-event-key="${key}"[^>]*>.*?</span>`, 'gi');
29729
+ updatedHtml = updatedHtml.replace(regex, (match) => {
29730
+ // Replace the content inside the span
29731
+ return match.replace(/>.*?</, `>${value}<`);
29732
+ });
29733
+ }
29442
29734
  });
29443
29735
  this.updatedHtmlGrammar = updatedHtml;
29444
29736
  }
@@ -29479,10 +29771,10 @@ class StepBuilderActionComponent {
29479
29771
  }
29480
29772
  }
29481
29773
  StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
29482
- StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n </div>\n </div> -->\n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
29774
+ StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
29483
29775
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
29484
29776
  type: Component,
29485
- args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n </div>\n </div> -->\n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", styles: [] }]
29777
+ args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", styles: [] }]
29486
29778
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
29487
29779
  type: Input
29488
29780
  }], templates: [{
@@ -29491,6 +29783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
29491
29783
  type: Input
29492
29784
  }], setTemplateVariables: [{
29493
29785
  type: Input
29786
+ }], setAdvancedSettingsVariables: [{
29787
+ type: Input
29494
29788
  }], preventSelectTemplate: [{
29495
29789
  type: Input
29496
29790
  }], elementOptions: [{
@@ -29575,6 +29869,8 @@ class StepBuilderLoopComponent {
29575
29869
  this.isLoadingDataProfiles = false;
29576
29870
  /** Function to handle variable processing or custom logic. Can be passed from parent component. */
29577
29871
  this.setWhileTemplateVariables = () => { return []; };
29872
+ /** Function to handle advanced settings variables. Can be passed from parent component. */
29873
+ this.setAdvancedSettingsVariables = () => { return []; };
29578
29874
  /** Emit when step is created */
29579
29875
  this.createStep = new EventEmitter();
29580
29876
  /** Emit when cancelled */
@@ -29944,10 +30240,10 @@ class StepBuilderLoopComponent {
29944
30240
  }
29945
30241
  }
29946
30242
  StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
29947
- StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Loop Test Step\n </h2>\n\n <!-- Loop Type Selection -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <!-- For Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <!-- While Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action \n [showHeader]=\"false\" \n [templates]=\"whileTemplates\" \n [setTemplateVariables]=\"setWhileTemplateVariables\" \n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (templateChanged)=\"selectWhileTemplate($event)\" \n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n text=\"Create Step\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
30243
+ StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Loop Test Step\n </h2>\n\n <!-- Loop Type Selection -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <!-- For Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <!-- While Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action \n [showHeader]=\"false\" \n [templates]=\"whileTemplates\" \n [setTemplateVariables]=\"setWhileTemplateVariables\" \n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (templateChanged)=\"selectWhileTemplate($event)\" \n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n text=\"Create Step\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
29948
30244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
29949
30245
  type: Component,
29950
- args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Loop Test Step\n </h2>\n\n <!-- Loop Type Selection -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <!-- For Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <!-- While Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action \n [showHeader]=\"false\" \n [templates]=\"whileTemplates\" \n [setTemplateVariables]=\"setWhileTemplateVariables\" \n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (templateChanged)=\"selectWhileTemplate($event)\" \n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n text=\"Create Step\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
30246
+ args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Loop Test Step\n </h2>\n\n <!-- Loop Type Selection -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <!-- For Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <!-- While Button -->\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action \n [showHeader]=\"false\" \n [templates]=\"whileTemplates\" \n [setTemplateVariables]=\"setWhileTemplateVariables\" \n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (templateChanged)=\"selectWhileTemplate($event)\" \n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n text=\"Create Step\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
29951
30247
  }], ctorParameters: function () { return []; }, propDecorators: { loopType: [{
29952
30248
  type: Input
29953
30249
  }], selectOptions: [{
@@ -29960,6 +30256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
29960
30256
  type: Input
29961
30257
  }], setWhileTemplateVariables: [{
29962
30258
  type: Input
30259
+ }], setAdvancedSettingsVariables: [{
30260
+ type: Input
29963
30261
  }], createStep: [{
29964
30262
  type: Output
29965
30263
  }], cancelled: [{
@@ -30051,6 +30349,8 @@ class StepBuilderConditionComponent {
30051
30349
  this.conditionTemplates = [];
30052
30350
  /** Function to handle variable processing or custom logic. Can be passed from parent component. */
30053
30351
  this.setConditionTemplateVariables = () => { return []; };
30352
+ /** Function to handle advanced settings variables. Can be passed from parent component. */
30353
+ this.setAdvancedSettingsVariables = () => { return []; };
30054
30354
  this.elementOptions = []; // Element objects for element dropdown
30055
30355
  this.hasMoreElements = false; // Whether more elements are available
30056
30356
  this.isLoadingElements = false; // Loading state for elements
@@ -30097,6 +30397,10 @@ class StepBuilderConditionComponent {
30097
30397
  this.conditionTemplateVariables = new Map();
30098
30398
  this.conditionVariablesForms = new Map();
30099
30399
  this.conditionUpdatedHtmlGrammar = new Map(); // Updated HTML grammar per condition
30400
+ // Advanced settings variables per condition
30401
+ this.conditionAdvancedSettingsVariables = new Map();
30402
+ this.conditionAdvancedVariablesForms = new Map();
30403
+ this.conditionAdvancedExpanded = new Map();
30100
30404
  // Cache for condition form groups to avoid repeated lookups
30101
30405
  this.conditionFormGroupCache = new Map();
30102
30406
  this.conditionForm = this.fb.group({
@@ -30175,6 +30479,9 @@ class StepBuilderConditionComponent {
30175
30479
  const newFormGroupCache = new Map();
30176
30480
  const newValueConfigs = new Map();
30177
30481
  const newUpdatedHtmlGrammar = new Map();
30482
+ const newAdvancedSettingsVariables = new Map();
30483
+ const newAdvancedVariablesForms = new Map();
30484
+ const newAdvancedExpanded = new Map();
30178
30485
  this.selectedTemplates.forEach((template, oldIndex) => {
30179
30486
  if (oldIndex < removedIndex) {
30180
30487
  newSelectedTemplates.set(oldIndex, template);
@@ -30227,12 +30534,39 @@ class StepBuilderConditionComponent {
30227
30534
  newUpdatedHtmlGrammar.set(oldIndex - 1, grammar);
30228
30535
  }
30229
30536
  });
30537
+ this.conditionAdvancedSettingsVariables.forEach((variables, oldIndex) => {
30538
+ if (oldIndex < removedIndex) {
30539
+ newAdvancedSettingsVariables.set(oldIndex, variables);
30540
+ }
30541
+ else if (oldIndex > removedIndex) {
30542
+ newAdvancedSettingsVariables.set(oldIndex - 1, variables);
30543
+ }
30544
+ });
30545
+ this.conditionAdvancedVariablesForms.forEach((form, oldIndex) => {
30546
+ if (oldIndex < removedIndex) {
30547
+ newAdvancedVariablesForms.set(oldIndex, form);
30548
+ }
30549
+ else if (oldIndex > removedIndex) {
30550
+ newAdvancedVariablesForms.set(oldIndex - 1, form);
30551
+ }
30552
+ });
30553
+ this.conditionAdvancedExpanded.forEach((expanded, oldIndex) => {
30554
+ if (oldIndex < removedIndex) {
30555
+ newAdvancedExpanded.set(oldIndex, expanded);
30556
+ }
30557
+ else if (oldIndex > removedIndex) {
30558
+ newAdvancedExpanded.set(oldIndex - 1, expanded);
30559
+ }
30560
+ });
30230
30561
  this.selectedTemplates = newSelectedTemplates;
30231
30562
  this.conditionTemplateVariables = newTemplateVariables;
30232
30563
  this.conditionVariablesForms = newVariablesForms;
30233
30564
  this.conditionFormGroupCache = newFormGroupCache;
30234
30565
  this.valueConfigsWithHandlers = newValueConfigs;
30235
30566
  this.conditionUpdatedHtmlGrammar = newUpdatedHtmlGrammar;
30567
+ this.conditionAdvancedSettingsVariables = newAdvancedSettingsVariables;
30568
+ this.conditionAdvancedVariablesForms = newAdvancedVariablesForms;
30569
+ this.conditionAdvancedExpanded = newAdvancedExpanded;
30236
30570
  }
30237
30571
  getOperatorConfig(index) {
30238
30572
  // Return cached config (static, same for all conditions)
@@ -30290,18 +30624,31 @@ class StepBuilderConditionComponent {
30290
30624
  this.buildConditionVariablesForm(index, variables);
30291
30625
  // Initialize updated HTML grammar
30292
30626
  this.updateConditionHtmlGrammar(index);
30627
+ // Initialize advanced settings variables
30628
+ if (this.setAdvancedSettingsVariables) {
30629
+ const advancedVariables = this.setAdvancedSettingsVariables(selectedTemplate);
30630
+ this.conditionAdvancedSettingsVariables.set(index, advancedVariables);
30631
+ this.buildConditionAdvancedVariablesForm(index, advancedVariables);
30632
+ }
30293
30633
  }
30294
30634
  else {
30295
30635
  // Clear template and variables if no template selected
30296
30636
  this.selectedTemplates.delete(index);
30297
30637
  this.conditionTemplateVariables.delete(index);
30298
30638
  this.conditionUpdatedHtmlGrammar.delete(index);
30639
+ this.conditionAdvancedSettingsVariables.delete(index);
30299
30640
  const formArray = this.conditionVariablesForms.get(index);
30300
30641
  if (formArray) {
30301
30642
  while (formArray.length !== 0) {
30302
30643
  formArray.removeAt(0);
30303
30644
  }
30304
30645
  }
30646
+ const advancedFormArray = this.conditionAdvancedVariablesForms.get(index);
30647
+ if (advancedFormArray) {
30648
+ while (advancedFormArray.length !== 0) {
30649
+ advancedFormArray.removeAt(0);
30650
+ }
30651
+ }
30305
30652
  }
30306
30653
  // Mark for check since we're using OnPush
30307
30654
  this.cdr.markForCheck();
@@ -30503,6 +30850,103 @@ class StepBuilderConditionComponent {
30503
30850
  });
30504
30851
  this.conditionUpdatedHtmlGrammar.set(conditionIndex, updatedGrammar);
30505
30852
  }
30853
+ buildConditionAdvancedVariablesForm(index, variables) {
30854
+ let formArray = this.conditionAdvancedVariablesForms.get(index);
30855
+ if (!formArray) {
30856
+ formArray = this.fb.array([]);
30857
+ this.conditionAdvancedVariablesForms.set(index, formArray);
30858
+ }
30859
+ // Ensure formArray is not undefined (TypeScript guard)
30860
+ if (!formArray) {
30861
+ return;
30862
+ }
30863
+ // Store reference to avoid TypeScript issues in forEach callback
30864
+ const formArrayRef = formArray;
30865
+ // Clear existing form array
30866
+ while (formArrayRef.length !== 0) {
30867
+ formArrayRef.removeAt(0);
30868
+ }
30869
+ // Add form groups for each advanced variable
30870
+ variables.forEach(variable => {
30871
+ // Handle different types
30872
+ let defaultValue;
30873
+ if (variable.type === 'str_list') {
30874
+ // For str_list, create a FormArray
30875
+ const valueArray = Array.isArray(variable.value) ? variable.value : [];
30876
+ const formArrayValue = this.fb.array(valueArray.length > 0
30877
+ ? valueArray.map((item) => this.fb.control(item))
30878
+ : [this.fb.control('')] // Start with one empty control
30879
+ );
30880
+ defaultValue = formArrayValue;
30881
+ }
30882
+ else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
30883
+ defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
30884
+ }
30885
+ else {
30886
+ defaultValue = variable.value || '';
30887
+ }
30888
+ // Create a FormGroup for each variable
30889
+ const variableGroup = this.fb.group({
30890
+ name: [variable.name],
30891
+ value: variable.type === 'str_list' ? defaultValue : [defaultValue],
30892
+ type: [variable.type || 'string'],
30893
+ label: [variable.label || '']
30894
+ });
30895
+ formArrayRef.push(variableGroup);
30896
+ });
30897
+ }
30898
+ getConditionAdvancedSettingsVariables(index) {
30899
+ return this.conditionAdvancedSettingsVariables.get(index) || [];
30900
+ }
30901
+ getConditionAdvancedVariablesForm(index) {
30902
+ let formArray = this.conditionAdvancedVariablesForms.get(index);
30903
+ if (!formArray) {
30904
+ formArray = this.fb.array([]);
30905
+ this.conditionAdvancedVariablesForms.set(index, formArray);
30906
+ }
30907
+ return formArray;
30908
+ }
30909
+ getConditionAdvancedExpanded(index) {
30910
+ return this.conditionAdvancedExpanded.get(index) || false;
30911
+ }
30912
+ toggleConditionAdvanced(index) {
30913
+ const current = this.conditionAdvancedExpanded.get(index) || false;
30914
+ this.conditionAdvancedExpanded.set(index, !current);
30915
+ this.cdr.markForCheck();
30916
+ }
30917
+ onConditionAdvancedVariableBooleanChange(conditionIndex, variableName, value) {
30918
+ var _a, _b, _c;
30919
+ // Update the variable in advancedSettingsVariables array
30920
+ const variables = this.conditionAdvancedSettingsVariables.get(conditionIndex) || [];
30921
+ const variable = variables.find(v => v.name === variableName);
30922
+ if (variable) {
30923
+ variable.value = value;
30924
+ }
30925
+ // Also update form array
30926
+ const variableIndex = (_a = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _a === void 0 ? void 0 : _a.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
30927
+ if (variableIndex !== undefined && variableIndex !== -1) {
30928
+ (_c = (_b = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _b === void 0 ? void 0 : _b.at(variableIndex).get('value')) === null || _c === void 0 ? void 0 : _c.setValue(value, { emitEvent: false });
30929
+ }
30930
+ }
30931
+ onConditionAdvancedVariableValueChange(conditionIndex, variableName, value) {
30932
+ var _a, _b, _c;
30933
+ // Update the variable in advancedSettingsVariables array
30934
+ const variables = this.conditionAdvancedSettingsVariables.get(conditionIndex) || [];
30935
+ const variable = variables.find(v => v.name === variableName);
30936
+ if (variable) {
30937
+ variable.value = value;
30938
+ }
30939
+ // Also update form array
30940
+ const variableIndex = (_a = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _a === void 0 ? void 0 : _a.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
30941
+ if (variableIndex !== undefined && variableIndex !== -1) {
30942
+ const formGroup = (_b = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _b === void 0 ? void 0 : _b.at(variableIndex);
30943
+ // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
30944
+ // so we don't need to rebuild or update it here to avoid focus loss.
30945
+ if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
30946
+ (_c = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get('value')) === null || _c === void 0 ? void 0 : _c.setValue(value, { emitEvent: false });
30947
+ }
30948
+ }
30949
+ }
30506
30950
  getConditionFormGroup(index) {
30507
30951
  // Use cache to avoid repeated lookups
30508
30952
  if (this.conditionFormGroupCache.has(index)) {
@@ -30548,6 +30992,26 @@ class StepBuilderConditionComponent {
30548
30992
  onCreateStep() {
30549
30993
  if (this.conditionForm.valid) {
30550
30994
  const formValue = this.conditionForm.value;
30995
+ // Sync advanced variables from form to array for all conditions
30996
+ this.conditionAdvancedSettingsVariables.forEach((variables, index) => {
30997
+ const formArray = this.conditionAdvancedVariablesForms.get(index);
30998
+ if (formArray) {
30999
+ variables.forEach((variable, varIndex) => {
31000
+ var _a;
31001
+ const formGroup = formArray.at(varIndex);
31002
+ if (formGroup) {
31003
+ const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
31004
+ if (variable.type === 'str_list' && formValue instanceof FormArray) {
31005
+ // Extract values from FormArray
31006
+ variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
31007
+ }
31008
+ else {
31009
+ variable.value = formValue;
31010
+ }
31011
+ }
31012
+ });
31013
+ }
31014
+ });
30551
31015
  const stepData = {
30552
31016
  conditions: formValue.conditions.map((cond, index) => {
30553
31017
  // Find the ActionTemplate object from the stored ID/value
@@ -30555,11 +31019,14 @@ class StepBuilderConditionComponent {
30555
31019
  const selectedTemplate = this.conditionTemplates.find(t => { var _a; return (((_a = t.id) === null || _a === void 0 ? void 0 : _a.toString()) === templateId) || (t.displayName === templateId); }) || this.selectedTemplates.get(index);
30556
31020
  // Get template variables for this condition
30557
31021
  const templateVariables = this.conditionTemplateVariables.get(index) || [];
31022
+ // Get advanced settings variables for this condition
31023
+ const advancedSettingsVariables = this.conditionAdvancedSettingsVariables.get(index) || [];
30558
31024
  return {
30559
31025
  field: cond.field,
30560
31026
  operator: cond.operator,
30561
31027
  value: selectedTemplate || null,
30562
31028
  templateVariables: templateVariables,
31029
+ advancedSettingsVariables: advancedSettingsVariables,
30563
31030
  description: cond.description || '',
30564
31031
  metadata: cond.metadata || ''
30565
31032
  };
@@ -30572,16 +31039,18 @@ class StepBuilderConditionComponent {
30572
31039
  }
30573
31040
  }
30574
31041
  StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
30575
- StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!conditionForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
31042
+ StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!conditionForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
30576
31043
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
30577
31044
  type: Component,
30578
- args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!conditionForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", styles: [] }]
31045
+ args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!conditionForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", styles: [] }]
30579
31046
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { operatorOptions: [{
30580
31047
  type: Input
30581
31048
  }], conditionTemplates: [{
30582
31049
  type: Input
30583
31050
  }], setConditionTemplateVariables: [{
30584
31051
  type: Input
31052
+ }], setAdvancedSettingsVariables: [{
31053
+ type: Input
30585
31054
  }], elementOptions: [{
30586
31055
  type: Input
30587
31056
  }], hasMoreElements: [{
@@ -31550,7 +32019,7 @@ class StepBuilderAiAgentComponent {
31550
32019
  }
31551
32020
  }
31552
32021
  StepBuilderAiAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
31553
- StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n <!-- Continue on Error -->\n <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div>\n\n <!-- Disabled -->\n <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div>\n\n <!-- Retry Count -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Iframe locator -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Other Locators -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
32022
+ StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n <!-- Continue on Error -->\n <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div>\n\n <!-- Disabled -->\n <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div>\n\n <!-- Retry Count -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Iframe locator -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Other Locators -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
31554
32023
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
31555
32024
  type: Component,
31556
32025
  args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n <!-- Continue on Error -->\n <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div>\n\n <!-- Disabled -->\n <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div>\n\n <!-- Retry Count -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Iframe locator -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Other Locators -->\n <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
@@ -31601,12 +32070,16 @@ class StepBuilderCustomCodeComponent {
31601
32070
  this.template = null;
31602
32071
  /** Function to handle variable processing or custom logic. Can be passed from parent component. */
31603
32072
  this.setTemplateVariables = () => { return []; };
32073
+ /** Function to handle advanced settings variables. Can be passed from parent component. */
32074
+ this.setAdvancedSettingsVariables = () => { return []; };
31604
32075
  this.isEditMode = false;
31605
32076
  /** Emit when step is created */
31606
32077
  this.createStep = new EventEmitter();
31607
32078
  /** Emit when cancelled */
31608
32079
  this.cancelled = new EventEmitter();
31609
32080
  this.templateVariables = [];
32081
+ this.advancedSettingsVariables = [];
32082
+ this.advancedExpanded = true;
31610
32083
  this.customCodeForm = this.fb.group({
31611
32084
  language: ['', Validators.required],
31612
32085
  code: ['', Validators.required],
@@ -31614,6 +32087,7 @@ class StepBuilderCustomCodeComponent {
31614
32087
  description: ['']
31615
32088
  });
31616
32089
  this.variablesForm = this.fb.group({});
32090
+ this.advancedVariablesForm = this.fb.array([]);
31617
32091
  }
31618
32092
  ngOnInit() {
31619
32093
  // Initialize form with initial values if in edit mode
@@ -31653,6 +32127,11 @@ class StepBuilderCustomCodeComponent {
31653
32127
  if (this.template && this.setTemplateVariables) {
31654
32128
  this.templateVariables = this.setTemplateVariables(this.template);
31655
32129
  this.buildVariablesForm();
32130
+ // Initialize advanced settings variables
32131
+ if (this.setAdvancedSettingsVariables) {
32132
+ this.advancedSettingsVariables = this.setAdvancedSettingsVariables(this.template);
32133
+ this.buildAdvancedVariablesForm();
32134
+ }
31656
32135
  }
31657
32136
  }
31658
32137
  buildVariablesForm() {
@@ -31727,31 +32206,117 @@ class StepBuilderCustomCodeComponent {
31727
32206
  onCancel() {
31728
32207
  this.cancelled.emit();
31729
32208
  }
32209
+ buildAdvancedVariablesForm() {
32210
+ // Clear existing form array
32211
+ while (this.advancedVariablesForm.length !== 0) {
32212
+ this.advancedVariablesForm.removeAt(0);
32213
+ }
32214
+ // Add form groups for each advanced variable
32215
+ this.advancedSettingsVariables.forEach(variable => {
32216
+ // Handle different types
32217
+ let defaultValue;
32218
+ if (variable.type === 'str_list') {
32219
+ // For str_list, create a FormArray
32220
+ const valueArray = Array.isArray(variable.value) ? variable.value : [];
32221
+ const formArrayValue = this.fb.array(valueArray.length > 0
32222
+ ? valueArray.map((item) => this.fb.control(item))
32223
+ : [this.fb.control('')] // Start with one empty control
32224
+ );
32225
+ defaultValue = formArrayValue;
32226
+ }
32227
+ else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
32228
+ defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
32229
+ }
32230
+ else {
32231
+ defaultValue = variable.value || '';
32232
+ }
32233
+ // Create a FormGroup for each variable
32234
+ const variableGroup = this.fb.group({
32235
+ name: [variable.name],
32236
+ value: variable.type === 'str_list' ? defaultValue : [defaultValue],
32237
+ type: [variable.type || 'string'],
32238
+ label: [variable.label || '']
32239
+ });
32240
+ this.advancedVariablesForm.push(variableGroup);
32241
+ });
32242
+ }
32243
+ onAdvancedVariableBooleanChange(variableName, value) {
32244
+ var _a;
32245
+ // Update the variable in advancedSettingsVariables array
32246
+ const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
32247
+ if (variable) {
32248
+ variable.value = value;
32249
+ }
32250
+ // Also update form array
32251
+ const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
32252
+ if (variableIndex !== -1) {
32253
+ (_a = this.advancedVariablesForm.at(variableIndex).get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
32254
+ }
32255
+ }
32256
+ onAdvancedVariableValueChange(variableName, value) {
32257
+ var _a;
32258
+ // Update the variable in advancedSettingsVariables array
32259
+ const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
32260
+ if (variable) {
32261
+ variable.value = value;
32262
+ }
32263
+ // Also update form array
32264
+ const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
32265
+ if (variableIndex !== -1) {
32266
+ const formGroup = this.advancedVariablesForm.at(variableIndex);
32267
+ // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
32268
+ // so we don't need to rebuild or update it here to avoid focus loss.
32269
+ if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
32270
+ (_a = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
32271
+ }
32272
+ }
32273
+ }
32274
+ toggleAdvanced() {
32275
+ this.advancedExpanded = !this.advancedExpanded;
32276
+ }
31730
32277
  onCreateStep() {
31731
32278
  if (this.customCodeForm.valid) {
32279
+ // Sync advanced variables from form to array
32280
+ this.advancedSettingsVariables.forEach((variable, index) => {
32281
+ var _a;
32282
+ const formGroup = this.advancedVariablesForm.at(index);
32283
+ if (formGroup) {
32284
+ const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
32285
+ if (variable.type === 'str_list' && formValue instanceof FormArray) {
32286
+ // Extract values from FormArray
32287
+ variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
32288
+ }
32289
+ else {
32290
+ variable.value = formValue;
32291
+ }
32292
+ }
32293
+ });
31732
32294
  const formValue = this.customCodeForm.value;
31733
32295
  const stepData = {
31734
32296
  language: formValue.language || '',
31735
32297
  code: formValue.code || '',
31736
32298
  metadata: formValue.metadata || '',
31737
32299
  description: formValue.description || '',
31738
- templateVariables: this.templateVariables.length > 0 ? this.templateVariables : undefined
32300
+ templateVariables: this.templateVariables.length > 0 ? this.templateVariables : undefined,
32301
+ advancedSettingsVariables: this.advancedSettingsVariables.length > 0 ? this.advancedSettingsVariables : undefined
31739
32302
  };
31740
32303
  this.createStep.emit(stepData);
31741
32304
  }
31742
32305
  }
31743
32306
  }
31744
32307
  StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
31745
- StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
32308
+ StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
31746
32309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
31747
32310
  type: Component,
31748
- args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
32311
+ args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
31749
32312
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { languageOptions: [{
31750
32313
  type: Input
31751
32314
  }], template: [{
31752
32315
  type: Input
31753
32316
  }], setTemplateVariables: [{
31754
32317
  type: Input
32318
+ }], setAdvancedSettingsVariables: [{
32319
+ type: Input
31755
32320
  }], initialCode: [{
31756
32321
  type: Input
31757
32322
  }], initialLanguage: [{
@@ -31978,6 +32543,8 @@ class StepBuilderDocumentComponent {
31978
32543
  { id: '\\t', value: '\\t', name: 'Tab (\\t)', label: 'Tab (\\t)' },
31979
32544
  { id: '|', value: '|', name: 'Pipe (|)', label: 'Pipe (|)' }
31980
32545
  ];
32546
+ /** Function to handle advanced settings variables. Can be passed from parent component. */
32547
+ this.setAdvancedSettingsVariables = () => { return []; };
31981
32548
  /** Optional URL for "Need help?" link in Document Mapper section */
31982
32549
  this.mapperHelpUrl = '';
31983
32550
  /** Tooltip text when hovering over "Need help?" (same as custom-edit-step) */
@@ -31995,6 +32562,8 @@ class StepBuilderDocumentComponent {
31995
32562
  this.uploadedFile = null;
31996
32563
  /** Visual state for drag-and-drop zone */
31997
32564
  this.isDragOver = false;
32565
+ this.advancedSettingsVariables = [];
32566
+ this.advancedExpanded = true;
31998
32567
  this.documentForm = this.fb.group({
31999
32568
  documentType: ['', Validators.required],
32000
32569
  outputVariable: ['', Validators.required],
@@ -32008,11 +32577,17 @@ class StepBuilderDocumentComponent {
32008
32577
  templateDescription: [''],
32009
32578
  mappings: this.fb.array([])
32010
32579
  });
32580
+ this.advancedVariablesForm = this.fb.array([]);
32011
32581
  }
32012
32582
  ngOnInit() {
32013
32583
  var _a;
32014
32584
  this.selectedTemplateSource = this.initialTemplateSource || ((_a = this.documentForm.get('templateSource')) === null || _a === void 0 ? void 0 : _a.value) || 'existing';
32015
32585
  this.initializeFormWithInitialValues();
32586
+ // Initialize advanced settings variables
32587
+ if (this.setAdvancedSettingsVariables) {
32588
+ this.advancedSettingsVariables = this.setAdvancedSettingsVariables(this.template, this.testStep);
32589
+ this.buildAdvancedVariablesForm();
32590
+ }
32016
32591
  }
32017
32592
  ngOnChanges(changes) {
32018
32593
  if (changes['documentTypeOptions'] || changes['templateOptions'] || changes['valueTypeOptions'] || changes['delimeterTypeOptions']) {
@@ -32024,6 +32599,13 @@ class StepBuilderDocumentComponent {
32024
32599
  changes['initialDelimeter'] || changes['initialFileFormatHeader']) {
32025
32600
  this.initializeFormWithInitialValues();
32026
32601
  }
32602
+ if (changes['template'] || changes['testStep'] || changes['setAdvancedSettingsVariables']) {
32603
+ // Re-initialize advanced settings variables if template or testStep changes
32604
+ if (this.setAdvancedSettingsVariables) {
32605
+ this.advancedSettingsVariables = this.setAdvancedSettingsVariables(this.template, this.testStep);
32606
+ this.buildAdvancedVariablesForm();
32607
+ }
32608
+ }
32027
32609
  }
32028
32610
  initializeFormWithInitialValues() {
32029
32611
  // Clear existing mappings
@@ -32250,11 +32832,94 @@ class StepBuilderDocumentComponent {
32250
32832
  // }
32251
32833
  return true;
32252
32834
  }
32835
+ buildAdvancedVariablesForm() {
32836
+ // Clear existing form array
32837
+ while (this.advancedVariablesForm.length !== 0) {
32838
+ this.advancedVariablesForm.removeAt(0);
32839
+ }
32840
+ // Add form groups for each advanced variable
32841
+ this.advancedSettingsVariables.forEach(variable => {
32842
+ // Handle different types
32843
+ let defaultValue;
32844
+ if (variable.type === 'str_list') {
32845
+ // For str_list, create a FormArray
32846
+ const valueArray = Array.isArray(variable.value) ? variable.value : [];
32847
+ const formArrayValue = this.fb.array(valueArray.length > 0
32848
+ ? valueArray.map((item) => this.fb.control(item))
32849
+ : [this.fb.control('')] // Start with one empty control
32850
+ );
32851
+ defaultValue = formArrayValue;
32852
+ }
32853
+ else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
32854
+ defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
32855
+ }
32856
+ else {
32857
+ defaultValue = variable.value || '';
32858
+ }
32859
+ // Create a FormGroup for each variable
32860
+ const variableGroup = this.fb.group({
32861
+ name: [variable.name],
32862
+ value: variable.type === 'str_list' ? defaultValue : [defaultValue],
32863
+ type: [variable.type || 'string'],
32864
+ label: [variable.label || '']
32865
+ });
32866
+ this.advancedVariablesForm.push(variableGroup);
32867
+ });
32868
+ }
32869
+ onAdvancedVariableBooleanChange(variableName, value) {
32870
+ var _a;
32871
+ // Update the variable in advancedSettingsVariables array
32872
+ const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
32873
+ if (variable) {
32874
+ variable.value = value;
32875
+ }
32876
+ // Also update form array
32877
+ const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
32878
+ if (variableIndex !== -1) {
32879
+ (_a = this.advancedVariablesForm.at(variableIndex).get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
32880
+ }
32881
+ }
32882
+ onAdvancedVariableValueChange(variableName, value) {
32883
+ var _a;
32884
+ // Update the variable in advancedSettingsVariables array
32885
+ const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
32886
+ if (variable) {
32887
+ variable.value = value;
32888
+ }
32889
+ // Also update form array
32890
+ const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
32891
+ if (variableIndex !== -1) {
32892
+ const formGroup = this.advancedVariablesForm.at(variableIndex);
32893
+ // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
32894
+ // so we don't need to rebuild or update it here to avoid focus loss.
32895
+ if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
32896
+ (_a = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
32897
+ }
32898
+ }
32899
+ }
32900
+ toggleAdvanced() {
32901
+ this.advancedExpanded = !this.advancedExpanded;
32902
+ }
32253
32903
  onCreateStep() {
32254
32904
  var _a, _b;
32255
32905
  if (!this.isFormValid()) {
32256
32906
  return;
32257
32907
  }
32908
+ // Sync advanced variables from form to array
32909
+ this.advancedSettingsVariables.forEach((variable, index) => {
32910
+ var _a;
32911
+ const formGroup = this.advancedVariablesForm.at(index);
32912
+ if (formGroup) {
32913
+ const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
32914
+ if (variable.type === 'str_list' && formValue instanceof FormArray) {
32915
+ // Extract values from FormArray
32916
+ variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
32917
+ }
32918
+ else {
32919
+ variable.value = formValue;
32920
+ }
32921
+ }
32922
+ });
32258
32923
  const formValue = this.documentForm.value;
32259
32924
  const stepData = Object.assign(Object.assign(Object.assign({ documentType: formValue.documentType, outputVariable: formValue.outputVariable, fileName: formValue.fileName || undefined, seprator: formValue.seprator || undefined, delimeter: formValue.delimeter || undefined, fileFormatHeader: formValue.fileFormatHeader || undefined, templateSource: this.selectedTemplateSource, templateId: formValue.templateId || undefined }, (this.selectedTemplateSource === 'upload' && this.uploadedFile && { uploadedFile: this.uploadedFile })), (this.selectedTemplateSource === 'createNew' && {
32260
32925
  templateName: ((_a = formValue.templateName) !== null && _a !== void 0 ? _a : '').trim(),
@@ -32267,7 +32932,7 @@ class StepBuilderDocumentComponent {
32267
32932
  value: m.value || '',
32268
32933
  enabled: (_a = m.enabled) !== null && _a !== void 0 ? _a : false
32269
32934
  });
32270
- }) });
32935
+ }), advancedSettingsVariables: this.advancedSettingsVariables.length > 0 ? this.advancedSettingsVariables : undefined });
32271
32936
  this.createStep.emit(stepData);
32272
32937
  }
32273
32938
  onMapperHelpClick(event) {
@@ -32278,10 +32943,10 @@ class StepBuilderDocumentComponent {
32278
32943
  }
32279
32944
  }
32280
32945
  StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
32281
- StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete mapping'\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
32946
+ StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete mapping'\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
32282
32947
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
32283
32948
  type: Component,
32284
- args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete mapping'\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
32949
+ args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete mapping'\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
32285
32950
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { documentTypeOptions: [{
32286
32951
  type: Input
32287
32952
  }], templateOptions: [{
@@ -32290,6 +32955,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
32290
32955
  type: Input
32291
32956
  }], delimeterTypeOptions: [{
32292
32957
  type: Input
32958
+ }], setAdvancedSettingsVariables: [{
32959
+ type: Input
32960
+ }], template: [{
32961
+ type: Input
32962
+ }], testStep: [{
32963
+ type: Input
32293
32964
  }], mapperHelpUrl: [{
32294
32965
  type: Input
32295
32966
  }], mapperHelpTooltipText: [{
@@ -32387,6 +33058,8 @@ class TestCaseDetailsEditComponent {
32387
33058
  this.prerequisiteCaseOptions = [];
32388
33059
  /** Platform: 'web' shows Default Browser + Viewport; 'mobile' shows Device Type + OS. Defaults to 'web'. */
32389
33060
  this.platform = 'web';
33061
+ /** When true, hides Priority, Type, and Test Data Set fields (step groups don't have these). Defaults to false. */
33062
+ this.isStepGroup = false;
32390
33063
  /**
32391
33064
  * Override config per select key. Use for:
32392
33065
  * - API-driven options: pass options array (update when API returns)
@@ -32743,8 +33416,16 @@ class TestCaseDetailsEditComponent {
32743
33416
  }
32744
33417
  getConfigItemValue(sectionTitle, itemLabel) {
32745
33418
  var _a, _b;
32746
- const section = [...this.configSections, ...this.configSectionsRow2].find((s) => s.title === sectionTitle);
32747
- const item = (_a = section === null || section === void 0 ? void 0 : section.items) === null || _a === void 0 ? void 0 : _a.find((i) => i.label === itemLabel);
33419
+ const section = [...this.configSections, ...this.configSectionsRow2].find((s) => {
33420
+ var _a;
33421
+ return s.title === sectionTitle ||
33422
+ ((_a = s.title) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(sectionTitle.toLowerCase()));
33423
+ });
33424
+ const item = (_a = section === null || section === void 0 ? void 0 : section.items) === null || _a === void 0 ? void 0 : _a.find((i) => {
33425
+ var _a;
33426
+ return i.label === itemLabel ||
33427
+ ((_a = i.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(itemLabel.toLowerCase()));
33428
+ });
32748
33429
  return (_b = item === null || item === void 0 ? void 0 : item.value) !== null && _b !== void 0 ? _b : '';
32749
33430
  }
32750
33431
  /** Get value from Device section - supports both 'Device' and 'Device Setting' titles */
@@ -32757,7 +33438,25 @@ class TestCaseDetailsEditComponent {
32757
33438
  getWaitsRetriesValue(itemLabel) {
32758
33439
  const v1 = this.getConfigItemValue('Wait and retries', itemLabel);
32759
33440
  const v2 = this.getConfigItemValue('Waits & Retries', itemLabel);
32760
- const val = (v1 !== '' && v1 != null) ? v1 : v2;
33441
+ let val = (v1 !== '' && v1 != null) ? v1 : v2;
33442
+ // When values are coming from organization settings, the portal wraps them as
33443
+ // "Org Level (ACTUAL VALUE)". For edit inputs (Retry Failed Steps, Test Case Timeout,
33444
+ // Wait Timeout for Locators), we only want to show the inner value, not the wrapper.
33445
+ if (val != null) {
33446
+ const raw = String(val).trim();
33447
+ const lower = raw.toLowerCase();
33448
+ const prefix = 'org level (';
33449
+ if (lower.startsWith(prefix)) {
33450
+ const openIdx = raw.indexOf('(');
33451
+ const closeIdx = raw.lastIndexOf(')');
33452
+ if (openIdx >= 0 && closeIdx > openIdx) {
33453
+ val = raw.substring(openIdx + 1, closeIdx).trim();
33454
+ }
33455
+ else {
33456
+ val = raw.substring(prefix.length).trim();
33457
+ }
33458
+ }
33459
+ }
32761
33460
  return val != null && val !== '' && String(val).trim() !== '' ? String(val) : '';
32762
33461
  }
32763
33462
  getPrerequisiteCasesFromConfig() {
@@ -32766,14 +33465,22 @@ class TestCaseDetailsEditComponent {
32766
33465
  return [];
32767
33466
  return val.includes(',') ? val.split(',').map((s) => s.trim()).filter(Boolean) : [val];
32768
33467
  }
33468
+ get hasPrerequisiteCaseConfig() {
33469
+ var _a;
33470
+ const section = [...this.configSections, ...this.configSectionsRow2].find((s) => s.title === 'Execution');
33471
+ return !!((_a = section === null || section === void 0 ? void 0 : section.items) === null || _a === void 0 ? void 0 : _a.some((i) => i.label === 'Prerequisite Case'));
33472
+ }
32769
33473
  ngOnInit() {
32770
- var _a, _b, _c, _d, _e, _f, _g, _h;
33474
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
32771
33475
  this.editDescription = this.descriptionContent;
32772
33476
  this.editStatus = (_b = (_a = this.statusItem) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
32773
33477
  this.editPriority = (_d = (_c = this.priorityItem) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '';
32774
- const typeVal = (_f = (this.getConfigItemValue('Execution', 'Type') || ((_e = this.typeItem) === null || _e === void 0 ? void 0 : _e.value))) !== null && _f !== void 0 ? _f : '';
32775
- const testDataProfileVal = (_g = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _g !== void 0 ? _g : '';
32776
- const testDataSetVal = (_h = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _h !== void 0 ? _h : '';
33478
+ const typeRaw = (_f = (this.getConfigItemValue('Execution', 'Type') || ((_e = this.typeItem) === null || _e === void 0 ? void 0 : _e.value))) !== null && _f !== void 0 ? _f : '';
33479
+ const testDataProfileRaw = (_g = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _g !== void 0 ? _g : '';
33480
+ const testDataSetRaw = (_h = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _h !== void 0 ? _h : '';
33481
+ const typeVal = (_l = this.resolveToOptionValue(typeRaw, (_k = (_j = this.selectConfigOverrides) === null || _j === void 0 ? void 0 : _j['type']) === null || _k === void 0 ? void 0 : _k.options)) !== null && _l !== void 0 ? _l : typeRaw;
33482
+ const testDataProfileVal = (_p = this.resolveToOptionValue(testDataProfileRaw, (_o = (_m = this.selectConfigOverrides) === null || _m === void 0 ? void 0 : _m['testDataProfile']) === null || _o === void 0 ? void 0 : _o.options)) !== null && _p !== void 0 ? _p : testDataProfileRaw;
33483
+ const testDataSetVal = (_s = this.resolveToOptionValue(testDataSetRaw, (_r = (_q = this.selectConfigOverrides) === null || _q === void 0 ? void 0 : _q['testDataSet']) === null || _r === void 0 ? void 0 : _r.options)) !== null && _s !== void 0 ? _s : testDataSetRaw;
32777
33484
  this.editLabels = [...this.labels];
32778
33485
  const autoWaitVal = this.getWaitsRetriesValue('Enable Avoid Auto wait for steps') || this.getConfigItemValue('Waits & Retries', 'Auto Wait');
32779
33486
  this.autoWaitEnabled = !!(autoWaitVal && autoWaitVal.trim() !== '' && String(autoWaitVal) !== 'false');
@@ -32818,28 +33525,71 @@ class TestCaseDetailsEditComponent {
32818
33525
  });
32819
33526
  this.cdr.markForCheck();
32820
33527
  }
33528
+ resolveToOptionValue(configValue, options) {
33529
+ var _a, _b;
33530
+ if (configValue == null || configValue === '')
33531
+ return configValue;
33532
+ const opts = options !== null && options !== void 0 ? options : [];
33533
+ if (!opts.length)
33534
+ return configValue;
33535
+ const num = typeof configValue === 'number' ? configValue : Number(configValue);
33536
+ const isNumeric = !Number.isNaN(num) && String(configValue).trim() === String(num);
33537
+ if (isNumeric)
33538
+ return configValue;
33539
+ const str = String(configValue).trim().toLowerCase();
33540
+ const match = opts.find((o) => {
33541
+ var _a, _b, _c;
33542
+ const n = String((_c = (_b = (_a = o.name) !== null && _a !== void 0 ? _a : o.label) !== null && _b !== void 0 ? _b : o.value) !== null && _c !== void 0 ? _c : '').trim().toLowerCase();
33543
+ return n === str;
33544
+ });
33545
+ return match != null ? ((_b = (_a = match.value) !== null && _a !== void 0 ? _a : match.id) !== null && _b !== void 0 ? _b : match) : configValue;
33546
+ }
32821
33547
  normalizeBooleanSelectValue(val) {
32822
33548
  if (val === true || val === 'true')
32823
33549
  return 'true';
32824
33550
  if (val === false || val === 'false')
32825
33551
  return 'false';
32826
- if (val === 'Org level' || val === 'Org Level')
33552
+ if (val === 'Org level' ||
33553
+ val === 'Org Level' ||
33554
+ (typeof val === 'string' && val.trim().toLowerCase().startsWith('org level ('))) {
32827
33555
  return 'Org level';
33556
+ }
32828
33557
  if (val === 'On Wait' || val === 'on wait')
32829
33558
  return 'true';
32830
33559
  return val && String(val).trim() ? String(val) : '';
32831
33560
  }
32832
33561
  ngOnChanges(changes) {
32833
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
33562
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
32834
33563
  if (changes['labels'] || changes['selectConfigOverrides']) {
32835
33564
  this._labelsSelectConfigDirty = true;
33565
+ if (changes['selectConfigOverrides'] && ((_a = this.editForm) === null || _a === void 0 ? void 0 : _a.get('type'))) {
33566
+ const typeCtrl = this.editForm.get('type');
33567
+ const tdpCtrl = this.editForm.get('testDataProfile');
33568
+ const tdsCtrl = this.editForm.get('testDataSet');
33569
+ const patch = {};
33570
+ if (typeCtrl && !typeCtrl.dirty) {
33571
+ const typeRaw = (_c = (this.getConfigItemValue('Execution', 'Type') || ((_b = this.typeItem) === null || _b === void 0 ? void 0 : _b.value))) !== null && _c !== void 0 ? _c : '';
33572
+ patch['type'] = ((_f = this.resolveToOptionValue(typeRaw, (_e = (_d = this.selectConfigOverrides) === null || _d === void 0 ? void 0 : _d['type']) === null || _e === void 0 ? void 0 : _e.options)) !== null && _f !== void 0 ? _f : typeRaw) || '';
33573
+ }
33574
+ if (tdpCtrl && !tdpCtrl.dirty) {
33575
+ const testDataProfileRaw = (_g = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _g !== void 0 ? _g : '';
33576
+ patch['testDataProfile'] = ((_k = this.resolveToOptionValue(testDataProfileRaw, (_j = (_h = this.selectConfigOverrides) === null || _h === void 0 ? void 0 : _h['testDataProfile']) === null || _j === void 0 ? void 0 : _j.options)) !== null && _k !== void 0 ? _k : testDataProfileRaw) || '';
33577
+ }
33578
+ if (tdsCtrl && !tdsCtrl.dirty) {
33579
+ const testDataSetRaw = (_l = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _l !== void 0 ? _l : '';
33580
+ patch['testDataSet'] = ((_p = this.resolveToOptionValue(testDataSetRaw, (_o = (_m = this.selectConfigOverrides) === null || _m === void 0 ? void 0 : _m['testDataSet']) === null || _o === void 0 ? void 0 : _o.options)) !== null && _p !== void 0 ? _p : testDataSetRaw) || '';
33581
+ }
33582
+ if (Object.keys(patch).length) {
33583
+ this.editForm.patchValue(patch, { emitEvent: false });
33584
+ }
33585
+ }
32836
33586
  }
32837
33587
  if (changes['descriptionContent'] || changes['labels'] || changes['metadataItems']) {
32838
33588
  this.editDescription = this.descriptionContent;
32839
33589
  this.editLabels = [...this.labels];
32840
- this.editStatus = (_b = (_a = this.statusItem) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
32841
- this.editPriority = (_d = (_c = this.priorityItem) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '';
32842
- const typeVal = (_f = (this.getConfigItemValue('Execution', 'Type') || ((_e = this.typeItem) === null || _e === void 0 ? void 0 : _e.value))) !== null && _f !== void 0 ? _f : '';
33590
+ this.editStatus = (_r = (_q = this.statusItem) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : '';
33591
+ this.editPriority = (_t = (_s = this.priorityItem) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : '';
33592
+ const typeVal = (_v = (this.getConfigItemValue('Execution', 'Type') || ((_u = this.typeItem) === null || _u === void 0 ? void 0 : _u.value))) !== null && _v !== void 0 ? _v : '';
32843
33593
  const statusControl = this.editForm.get('status');
32844
33594
  const priorityControl = this.editForm.get('priority');
32845
33595
  const typeControl = this.editForm.get('type');
@@ -32858,9 +33608,12 @@ class TestCaseDetailsEditComponent {
32858
33608
  const defaultAiAction = this.getConfigItemValue('AI Configuration', 'Default AI Action');
32859
33609
  const knowledgeBaseDefaultTestCase = this.getConfigItemValue('AI Configuration', 'Knowledge Base Default Test Case');
32860
33610
  const prerequisiteCases = this.getPrerequisiteCasesFromConfig();
32861
- const typeVal = (_h = (this.getConfigItemValue('Execution', 'Type') || ((_g = this.typeItem) === null || _g === void 0 ? void 0 : _g.value))) !== null && _h !== void 0 ? _h : '';
32862
- const testDataProfileVal = (_j = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _j !== void 0 ? _j : '';
32863
- const testDataSetVal = (_k = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _k !== void 0 ? _k : '';
33611
+ const typeRaw = (_x = (this.getConfigItemValue('Execution', 'Type') || ((_w = this.typeItem) === null || _w === void 0 ? void 0 : _w.value))) !== null && _x !== void 0 ? _x : '';
33612
+ const testDataProfileRaw = (_y = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _y !== void 0 ? _y : '';
33613
+ const testDataSetRaw = (_z = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _z !== void 0 ? _z : '';
33614
+ const typeVal = (_2 = this.resolveToOptionValue(typeRaw, (_1 = (_0 = this.selectConfigOverrides) === null || _0 === void 0 ? void 0 : _0['type']) === null || _1 === void 0 ? void 0 : _1.options)) !== null && _2 !== void 0 ? _2 : typeRaw;
33615
+ const testDataProfileVal = (_5 = this.resolveToOptionValue(testDataProfileRaw, (_4 = (_3 = this.selectConfigOverrides) === null || _3 === void 0 ? void 0 : _3['testDataProfile']) === null || _4 === void 0 ? void 0 : _4.options)) !== null && _5 !== void 0 ? _5 : testDataProfileRaw;
33616
+ const testDataSetVal = (_8 = this.resolveToOptionValue(testDataSetRaw, (_7 = (_6 = this.selectConfigOverrides) === null || _6 === void 0 ? void 0 : _6['testDataSet']) === null || _7 === void 0 ? void 0 : _7.options)) !== null && _8 !== void 0 ? _8 : testDataSetRaw;
32864
33617
  const defaultBrowser = this.getConfigItemValue('Execution', 'Default Browser');
32865
33618
  const videoRecordingRaw = this.getConfigItemValue('Execution', 'Video Recording');
32866
33619
  const videoRecording = this.normalizeBooleanSelectValue(videoRecordingRaw);
@@ -33098,10 +33851,10 @@ class TestCaseDetailsEditComponent {
33098
33851
  }
33099
33852
  }
33100
33853
  TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
33101
- TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", selectConfigOverrides: "selectConfigOverrides" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-py-4 cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Configuration (Figma: collapsible, gear icon, light purple inputs) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[12px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-[16px] cqa-py-0 cqa-px-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-px-3 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"editForm.get('testDataProfile')?.value\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-py-0 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = $event\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = $event\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Wait Timeout for Locators (secs)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = $event\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <!-- Device Settings -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <ng-container *ngIf=\"platform === 'web'\">\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"platform === 'mobile'\">\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('deviceType', deviceTypeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('deviceType')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('deviceOS', deviceOSSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('deviceOS')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onSave()\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33854
+ TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-py-4 cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Configuration (Figma: collapsible, gear icon, light purple inputs) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[12px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-[16px] cqa-py-0 cqa-px-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-px-3 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup && editForm.get('testDataProfile')?.value\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-py-0 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = $event\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = $event\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Wait Timeout for Locators (secs)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = $event\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onSave()\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33102
33855
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
33103
33856
  type: Component,
33104
- args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-py-4 cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Configuration (Figma: collapsible, gear icon, light purple inputs) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[12px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-[16px] cqa-py-0 cqa-px-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-px-3 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"editForm.get('testDataProfile')?.value\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-py-0 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = $event\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = $event\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Wait Timeout for Locators (secs)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = $event\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <!-- Device Settings -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <ng-container *ngIf=\"platform === 'web'\">\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"platform === 'mobile'\">\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('deviceType', deviceTypeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('deviceType')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('deviceOS', deviceOSSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('deviceOS')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onSave()\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
33857
+ args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-py-4 cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Configuration (Figma: collapsible, gear icon, light purple inputs) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[12px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-[16px] cqa-py-0 cqa-px-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-px-3 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup && editForm.get('testDataProfile')?.value\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-py-0 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = $event\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = $event\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n label=\"Wait Timeout for Locators (secs)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = $event\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onSave()\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
33105
33858
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { descriptionTitle: [{
33106
33859
  type: Input
33107
33860
  }], descriptionContent: [{
@@ -33122,6 +33875,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
33122
33875
  type: Input
33123
33876
  }], platform: [{
33124
33877
  type: Input
33878
+ }], isStepGroup: [{
33879
+ type: Input
33125
33880
  }], selectConfigOverrides: [{
33126
33881
  type: Input
33127
33882
  }], save: [{
@@ -33167,8 +33922,12 @@ class TestCaseDetailsComponent {
33167
33922
  this.configSectionsRow2 = [];
33168
33923
  /** Platform: 'web' or 'mobile'. Defaults to 'web'. Used for Device Settings fields. */
33169
33924
  this.platform = 'web';
33925
+ /** When true, filters out Priority and Type from metadata (step groups don't have these). Defaults to false. */
33926
+ this.isStepGroup = false;
33170
33927
  /** Override config per select for API-driven options, server search, load more. */
33171
33928
  this.selectConfigOverrides = {};
33929
+ /** Labels to filter out from metadata for step groups */
33930
+ this.stepGroupExcludedMetadataLabels = ['priority', 'type'];
33172
33931
  this.editDescription = new EventEmitter();
33173
33932
  this.cancel = new EventEmitter();
33174
33933
  this.saveChanges = new EventEmitter();
@@ -33188,6 +33947,13 @@ class TestCaseDetailsComponent {
33188
33947
  this._editing = true;
33189
33948
  }
33190
33949
  }
33950
+ /** Filtered metadata items - excludes Priority and Type for step groups */
33951
+ get filteredMetadataItems() {
33952
+ if (!this.isStepGroup) {
33953
+ return this.metadataItems;
33954
+ }
33955
+ return this.metadataItems.filter((item) => { var _a, _b; return !this.stepGroupExcludedMetadataLabels.includes((_b = (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : ''); });
33956
+ }
33191
33957
  onEditClick() {
33192
33958
  if (this.editing === undefined) {
33193
33959
  this._editing = true;
@@ -33244,10 +34010,10 @@ class TestCaseDetailsComponent {
33244
34010
  }
33245
34011
  }
33246
34012
  TestCaseDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
33247
- TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n *ngIf=\"isEditing\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n (save)=\"onSaveChanges($event)\"\n (cancel)=\"onCancelEdit()\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <!-- Description Section -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <button\n *ngIf=\"showEditButton\"\n type=\"button\"\n class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onEditClick()\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n Edit\n </button>\n </div>\n <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n </div>\n </div>\n\n <!-- Metadata Section -->\n <div *ngIf=\"metadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-2 cqa-gap-y-4\">\n <ng-container *ngFor=\"let item of metadataItems; trackBy: trackByMetadataLabel\">\n <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n <div\n class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n {{ item.icon }}\n </mat-icon>\n <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n <a\n *ngIf=\"item.link\"\n href=\"javascript:void(0)\"\n class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n {{ item.value }}\n </a>\n <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n {{ item.value }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge\n *ngFor=\"let label of labels\"\n [label]=\"label\"\n icon=\"label\"\n variant=\"outline\"\n size=\"small\"\n backgroundColor=\"#ffffff\"\n textColor=\"#475569\"\n borderColor=\"#E2E8F0\"\n iconColor=\"#94A3B8\">\n </cqa-badge>\n </div>\n </div>\n\n <!-- Configuration Section -->\n <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n </div>\n </div>\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n <cqa-configuration-card\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </ng-container>\n </div>\n <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <cqa-configuration-card\n *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </div>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: ["icon", "title", "data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
34013
+ TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n *ngIf=\"isEditing\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n [isStepGroup]=\"isStepGroup\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n (save)=\"onSaveChanges($event)\"\n (cancel)=\"onCancelEdit()\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <!-- Description Section -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <button\n *ngIf=\"showEditButton\"\n type=\"button\"\n class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onEditClick()\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n Edit\n </button>\n </div>\n <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n </div>\n </div>\n\n <!-- Metadata Section -->\n <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n <div\n class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n {{ item.icon }}\n </mat-icon>\n <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n <a\n *ngIf=\"item.link\"\n href=\"javascript:void(0)\"\n class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n {{ item.value }}\n </a>\n <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n {{ item.value }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge\n *ngFor=\"let label of labels\"\n [label]=\"label\"\n icon=\"label\"\n variant=\"outline\"\n size=\"small\"\n backgroundColor=\"#ffffff\"\n textColor=\"#475569\"\n borderColor=\"#E2E8F0\"\n iconColor=\"#94A3B8\">\n </cqa-badge>\n </div>\n </div>\n\n <!-- Configuration Section -->\n <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n </div>\n </div>\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n <cqa-configuration-card\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </ng-container>\n </div>\n <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <cqa-configuration-card\n *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </div>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: ["icon", "title", "data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33248
34014
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, decorators: [{
33249
34015
  type: Component,
33250
- args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n *ngIf=\"isEditing\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n (save)=\"onSaveChanges($event)\"\n (cancel)=\"onCancelEdit()\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <!-- Description Section -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <button\n *ngIf=\"showEditButton\"\n type=\"button\"\n class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onEditClick()\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n Edit\n </button>\n </div>\n <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n </div>\n </div>\n\n <!-- Metadata Section -->\n <div *ngIf=\"metadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-2 cqa-gap-y-4\">\n <ng-container *ngFor=\"let item of metadataItems; trackBy: trackByMetadataLabel\">\n <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n <div\n class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n {{ item.icon }}\n </mat-icon>\n <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n <a\n *ngIf=\"item.link\"\n href=\"javascript:void(0)\"\n class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n {{ item.value }}\n </a>\n <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n {{ item.value }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge\n *ngFor=\"let label of labels\"\n [label]=\"label\"\n icon=\"label\"\n variant=\"outline\"\n size=\"small\"\n backgroundColor=\"#ffffff\"\n textColor=\"#475569\"\n borderColor=\"#E2E8F0\"\n iconColor=\"#94A3B8\">\n </cqa-badge>\n </div>\n </div>\n\n <!-- Configuration Section -->\n <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n </div>\n </div>\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n <cqa-configuration-card\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </ng-container>\n </div>\n <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <cqa-configuration-card\n *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [] }]
34016
+ args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n *ngIf=\"isEditing\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n [isStepGroup]=\"isStepGroup\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n (save)=\"onSaveChanges($event)\"\n (cancel)=\"onCancelEdit()\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <!-- Description Section -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <button\n *ngIf=\"showEditButton\"\n type=\"button\"\n class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onEditClick()\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n Edit\n </button>\n </div>\n <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n </div>\n </div>\n\n <!-- Metadata Section -->\n <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n <div\n class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n {{ item.icon }}\n </mat-icon>\n <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n <a\n *ngIf=\"item.link\"\n href=\"javascript:void(0)\"\n class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n {{ item.value }}\n </a>\n <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n {{ item.value }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge\n *ngFor=\"let label of labels\"\n [label]=\"label\"\n icon=\"label\"\n variant=\"outline\"\n size=\"small\"\n backgroundColor=\"#ffffff\"\n textColor=\"#475569\"\n borderColor=\"#E2E8F0\"\n iconColor=\"#94A3B8\">\n </cqa-badge>\n </div>\n </div>\n\n <!-- Configuration Section -->\n <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n </div>\n </div>\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n <cqa-configuration-card\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </ng-container>\n </div>\n <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n <cqa-configuration-card\n *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n [icon]=\"section.icon || 'tune'\"\n [title]=\"section.title\"\n [data]=\"section.items\">\n </cqa-configuration-card>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [] }]
33251
34017
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { editing: [{
33252
34018
  type: Input
33253
34019
  }], startInEditMode: [{
@@ -33272,6 +34038,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
33272
34038
  type: Input
33273
34039
  }], platform: [{
33274
34040
  type: Input
34041
+ }], isStepGroup: [{
34042
+ type: Input
33275
34043
  }], selectConfigOverrides: [{
33276
34044
  type: Input
33277
34045
  }], editDescription: [{
@@ -33323,6 +34091,8 @@ class DetailSidePanelComponent {
33323
34091
  this.configSectionsRow2 = [];
33324
34092
  /** Platform: 'web' or 'mobile'. Defaults to 'web'. Used for Device Settings. */
33325
34093
  this.platform = 'web';
34094
+ /** When true, hides Priority, Type, Test Data Set, and Prerequisite Case (step groups don't have these). Defaults to false. */
34095
+ this.isStepGroup = false;
33326
34096
  /** Configuration section title */
33327
34097
  this.configTitle = 'Configuration';
33328
34098
  /** Whether to show the close button in the side menu */
@@ -33424,13 +34194,13 @@ class DetailSidePanelComponent {
33424
34194
  }
33425
34195
  }
33426
34196
  DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
33427
- DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", editing: "editing", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n <cqa-test-case-details\n *ngIf=\"activeTab === 'test-case'\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [showEditButton]=\"showEditButton\"\n [startInEditMode]=\"startInEditMode\"\n [editing]=\"editing\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n (editDescription)=\"onEditDescription()\"\n (cancel)=\"onCancel()\"\n (saveChanges)=\"onSaveChanges($event)\"\n (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n </cqa-test-case-details>\n\n <!-- Placeholder for other tabs (Data Library, Variables) -->\n <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: ["editing", "startInEditMode", "descriptionTitle", "descriptionContent", "enableMarkdown", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "selectConfigOverrides"], outputs: ["editDescription", "cancel", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }], directives: [{ type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
34197
+ DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", editing: "editing", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n <cqa-test-case-details\n *ngIf=\"activeTab === 'test-case'\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [showEditButton]=\"showEditButton\"\n [startInEditMode]=\"startInEditMode\"\n [editing]=\"editing\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n [isStepGroup]=\"isStepGroup\"\n (editDescription)=\"onEditDescription()\"\n (cancel)=\"onCancel()\"\n (saveChanges)=\"onSaveChanges($event)\"\n (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n </cqa-test-case-details>\n\n <!-- Placeholder for other tabs (Data Library, Variables) -->\n <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: ["editing", "startInEditMode", "descriptionTitle", "descriptionContent", "enableMarkdown", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["editDescription", "cancel", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }], directives: [{ type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33428
34198
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
33429
34199
  type: Component,
33430
34200
  args: [{ selector: 'cqa-detail-side-panel', styles: [DETAIL_SIDE_PANEL_SCROLL_STYLES], changeDetection: ChangeDetectionStrategy.OnPush, host: {
33431
34201
  class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
33432
34202
  style: 'transition: width 0.3s ease-in-out',
33433
- }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n <cqa-test-case-details\n *ngIf=\"activeTab === 'test-case'\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [showEditButton]=\"showEditButton\"\n [startInEditMode]=\"startInEditMode\"\n [editing]=\"editing\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n (editDescription)=\"onEditDescription()\"\n (cancel)=\"onCancel()\"\n (saveChanges)=\"onSaveChanges($event)\"\n (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n </cqa-test-case-details>\n\n <!-- Placeholder for other tabs (Data Library, Variables) -->\n <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
34203
+ }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n <cqa-test-case-details\n *ngIf=\"activeTab === 'test-case'\"\n [descriptionTitle]=\"descriptionTitle\"\n [descriptionContent]=\"descriptionContent\"\n [enableMarkdown]=\"enableMarkdown\"\n [showEditButton]=\"showEditButton\"\n [startInEditMode]=\"startInEditMode\"\n [editing]=\"editing\"\n [selectConfigOverrides]=\"selectConfigOverrides\"\n [metadataItems]=\"metadataItems\"\n [labels]=\"labels\"\n [configTitle]=\"configTitle\"\n [configSections]=\"configSections\"\n [configSectionsRow2]=\"configSectionsRow2\"\n [platform]=\"platform\"\n [isStepGroup]=\"isStepGroup\"\n (editDescription)=\"onEditDescription()\"\n (cancel)=\"onCancel()\"\n (saveChanges)=\"onSaveChanges($event)\"\n (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n (selectSearch)=\"selectSearch.emit($event)\"\n (selectLoadMore)=\"selectLoadMore.emit($event)\"\n (selectOpened)=\"selectOpened.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (labelAdded)=\"labelAdded.emit($event)\">\n </cqa-test-case-details>\n\n <!-- Placeholder for other tabs (Data Library, Variables) -->\n <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
33434
34204
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabs: [{
33435
34205
  type: Input
33436
34206
  }], activeTab: [{
@@ -33453,6 +34223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
33453
34223
  type: Input
33454
34224
  }], platform: [{
33455
34225
  type: Input
34226
+ }], isStepGroup: [{
34227
+ type: Input
33456
34228
  }], configTitle: [{
33457
34229
  type: Input
33458
34230
  }], showCloseButton: [{
@@ -34344,66 +35116,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
34344
35116
  type: Input
34345
35117
  }] } });
34346
35118
 
34347
- class AdvancedVariablesFormComponent {
34348
- constructor() {
34349
- this.advancedVariables = [];
34350
- this.advancedVariableForm = new FormArray([]);
34351
- this.variableBooleanChange = new EventEmitter();
34352
- }
34353
- ngOnChanges(changes) {
34354
- // Handle changes if needed
34355
- if (changes['advancedVariables'] || changes['advancedVariableForm']) {
34356
- // Form is managed by parent component
34357
- }
34358
- }
34359
- /**
34360
- * Get the FormGroup at a specific index
34361
- */
34362
- getFormGroupAt(index) {
34363
- if (this.advancedVariableForm && index >= 0 && index < this.advancedVariableForm.length) {
34364
- const control = this.advancedVariableForm.at(index);
34365
- return control instanceof FormGroup ? control : null;
34366
- }
34367
- return null;
34368
- }
34369
- /**
34370
- * Get the value from form or variable
34371
- */
34372
- getBooleanValue(variable, index) {
34373
- var _a;
34374
- const formGroup = this.getFormGroupAt(index);
34375
- if (formGroup) {
34376
- const value = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
34377
- return value !== null && value !== undefined ? value : variable.value || false;
34378
- }
34379
- return variable.value || false;
34380
- }
34381
- /**
34382
- * Handle boolean value change
34383
- */
34384
- onVariableBooleanChange(variableName, value) {
34385
- this.variableBooleanChange.emit({ name: variableName, value });
34386
- }
34387
- /**
34388
- * Track by function for ngFor
34389
- */
34390
- trackByVariable(index, variable) {
34391
- return variable.name || index.toString();
34392
- }
34393
- }
34394
- AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
34395
- AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n</div>\n\n", components: [{ type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
34396
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
34397
- type: Component,
34398
- args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n</div>\n\n", styles: [] }]
34399
- }], propDecorators: { advancedVariables: [{
34400
- type: Input
34401
- }], advancedVariableForm: [{
34402
- type: Input
34403
- }], variableBooleanChange: [{
34404
- type: Output
34405
- }] } });
34406
-
34407
35119
  const STEP_DETAILS_MODAL_DATA = new InjectionToken('STEP_DETAILS_MODAL_DATA');
34408
35120
 
34409
35121
  class StepDetailsModalRef {
@@ -35762,7 +36474,7 @@ const TEST_CASE_DETAILS_FIELD_MAP = {
35762
36474
  * Use in ts-portal when mapping test case API response to component inputs.
35763
36475
  */
35764
36476
  function buildTestCaseDetailsFromApi(data, options) {
35765
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
36477
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
35766
36478
  const formatDate = (v) => {
35767
36479
  if (!v)
35768
36480
  return '';
@@ -35779,38 +36491,42 @@ function buildTestCaseDetailsFromApi(data, options) {
35779
36491
  metadataItems.push({ label: 'Status', value: data.status, statusColor: resolveColor(data.status, statusConfig) });
35780
36492
  if (data.priority != null)
35781
36493
  metadataItems.push({ label: 'Priority', value: data.priority, statusColor: resolveColor(data.priority, priorityConfig) });
35782
- if (data.type != null)
35783
- metadataItems.push({ label: 'Type', value: data.type, icon: 'category' });
35784
36494
  if (data.environment != null)
35785
36495
  metadataItems.push({ label: 'Environment', value: data.environment, icon: 'storage' });
35786
36496
  if (data.version != null)
35787
36497
  metadataItems.push({ label: 'Version', value: data.version, icon: 'label' });
35788
- if (data.platform != null)
36498
+ if (data.platform != null) {
36499
+ const platformVal = String(data.platform).trim();
36500
+ const displayPlatform = platformVal === 'web' || platformVal === 'mobile'
36501
+ ? platformVal
36502
+ : /^(android|ios|mobile\s*app|devices)$/i.test(platformVal)
36503
+ ? 'mobile'
36504
+ : 'web';
35789
36505
  metadataItems.push({
35790
36506
  label: 'Platform',
35791
- value: data.platform === 'web' ? 'web' : 'iOS',
36507
+ value: displayPlatform,
35792
36508
  icon: 'devices',
35793
36509
  });
36510
+ }
35794
36511
  const configSections = [
35795
36512
  {
35796
36513
  title: 'Execution',
35797
36514
  icon: 'play_circle',
35798
36515
  items: [
35799
- { label: 'Prerequisite Case', value: (_a = data.prerequisiteCase) !== null && _a !== void 0 ? _a : null },
35800
- { label: 'Type', value: (_c = (_b = data.typeId) !== null && _b !== void 0 ? _b : data.type) !== null && _c !== void 0 ? _c : null },
35801
- { label: 'Test Data Profile', value: (_e = (_d = data.testDataProfileId) !== null && _d !== void 0 ? _d : data.testDataProfile) !== null && _e !== void 0 ? _e : null },
35802
- { label: 'Test Data Set', value: (_g = (_f = data.testDataSetIndex) !== null && _f !== void 0 ? _f : data.testDataSet) !== null && _g !== void 0 ? _g : null },
35803
- { label: 'Video Recording', value: (_h = data.videoRecording) !== null && _h !== void 0 ? _h : '' },
36516
+ { label: 'Type', value: (_b = (_a = data.type) !== null && _a !== void 0 ? _a : data.typeId) !== null && _b !== void 0 ? _b : null },
36517
+ { label: 'Test Data Profile', value: (_d = (_c = data.testDataProfile) !== null && _c !== void 0 ? _c : data.testDataProfileId) !== null && _d !== void 0 ? _d : null },
36518
+ { label: 'Test Data Set', value: (_f = (_e = data.testDataSet) !== null && _e !== void 0 ? _e : data.testDataSetIndex) !== null && _f !== void 0 ? _f : null },
36519
+ { label: 'Video Recording', value: (_g = data.videoRecording) !== null && _g !== void 0 ? _g : '' },
35804
36520
  ],
35805
36521
  },
35806
36522
  {
35807
36523
  title: 'AI Configuration',
35808
36524
  icon: 'smart_toy',
35809
36525
  items: [
35810
- { label: 'Enable AI Smartness', value: (_j = data.enableAiSmartness) !== null && _j !== void 0 ? _j : '' },
35811
- { label: 'Default AI Action', value: (_k = data.defaultAiAction) !== null && _k !== void 0 ? _k : '' },
35812
- { label: 'Knowledge Base Default Test Case', value: (_l = data.knowledgeBaseDefaultTestCase) !== null && _l !== void 0 ? _l : null },
35813
- { label: 'Enable AI metadata collection', value: (_m = data.useAiMetadata) !== null && _m !== void 0 ? _m : '' },
36526
+ { label: 'Enable AI Smartness', value: (_h = data.enableAiSmartness) !== null && _h !== void 0 ? _h : '' },
36527
+ { label: 'Default AI Action', value: (_j = data.defaultAiAction) !== null && _j !== void 0 ? _j : '' },
36528
+ { label: 'Knowledge Base Default Test Case', value: (_k = data.knowledgeBaseDefaultTestCase) !== null && _k !== void 0 ? _k : null },
36529
+ { label: 'Enable AI metadata collection', value: (_l = data.useAiMetadata) !== null && _l !== void 0 ? _l : '' },
35814
36530
  ],
35815
36531
  },
35816
36532
  ];
@@ -35819,10 +36535,10 @@ function buildTestCaseDetailsFromApi(data, options) {
35819
36535
  title: 'Wait and retries',
35820
36536
  icon: 'timer',
35821
36537
  items: [
35822
- { label: 'Enable Avoid Auto wait for steps', value: (_o = data.autoWaitEnabled) !== null && _o !== void 0 ? _o : false },
35823
- { label: 'Retry Failed Steps', value: (_p = data.retryFailedSteps) !== null && _p !== void 0 ? _p : '' },
35824
- { label: 'Test Case Timeout (minutes)', value: (_q = data.testCaseTimeout) !== null && _q !== void 0 ? _q : '' },
35825
- { label: 'Wait Timeout for Locators (secs)', value: (_r = data.waitTimeoutForLocators) !== null && _r !== void 0 ? _r : '' },
36538
+ { label: 'Enable Avoid Auto wait for steps', value: (_m = data.autoWaitEnabled) !== null && _m !== void 0 ? _m : false },
36539
+ { label: 'Retry Failed Steps', value: (_o = data.retryFailedSteps) !== null && _o !== void 0 ? _o : '' },
36540
+ { label: 'Test Case Timeout (minutes)', value: (_p = data.testCaseTimeout) !== null && _p !== void 0 ? _p : '' },
36541
+ { label: 'Wait Timeout for Locators (secs)', value: (_q = data.waitTimeoutForLocators) !== null && _q !== void 0 ? _q : '' },
35826
36542
  ],
35827
36543
  },
35828
36544
  {
@@ -35847,17 +36563,23 @@ function buildTestCaseDetailsFromApi(data, options) {
35847
36563
  title: 'Key Flags',
35848
36564
  icon: 'flag',
35849
36565
  items: [
35850
- { label: 'Mobile Testing', value: (_s = data.mobileTesting) !== null && _s !== void 0 ? _s : '' },
35851
- { label: 'Extension Use', value: (_t = data.extensionUse) !== null && _t !== void 0 ? _t : '' },
35852
- { label: 'Data Driven', value: (_u = data.dataDriven) !== null && _u !== void 0 ? _u : '' },
36566
+ { label: 'Mobile Testing', value: (_r = data.mobileTesting) !== null && _r !== void 0 ? _r : '' },
36567
+ { label: 'Extension Use', value: (_s = data.extensionUse) !== null && _s !== void 0 ? _s : '' },
36568
+ { label: 'Data Driven', value: (_t = data.dataDriven) !== null && _t !== void 0 ? _t : '' },
35853
36569
  ],
35854
36570
  },
35855
36571
  ];
36572
+ // Hide Device Setting for mobile unless showDeviceSettingForMobile is true
36573
+ const isMobile = data.platform === 'mobile' || data.mobileTesting === true;
36574
+ const hideDeviceSettingForMobile = isMobile && !(options === null || options === void 0 ? void 0 : options.showDeviceSettingForMobile);
36575
+ const filteredConfigSectionsRow2 = hideDeviceSettingForMobile
36576
+ ? configSectionsRow2.filter((s) => s.title !== 'Device Setting')
36577
+ : configSectionsRow2;
35856
36578
  return {
35857
36579
  metadataItems,
35858
- labels: (_v = data.labels) !== null && _v !== void 0 ? _v : [],
36580
+ labels: (_u = data.labels) !== null && _u !== void 0 ? _u : [],
35859
36581
  configSections,
35860
- configSectionsRow2,
36582
+ configSectionsRow2: filteredConfigSectionsRow2,
35861
36583
  };
35862
36584
  }
35863
36585