@cqa-lib/cqa-ui 1.1.329 → 1.1.331

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.
@@ -20933,7 +20933,7 @@ class TestDataModalComponent {
20933
20933
  /** Handle row click (select parameter). Edit button uses onParameterEditClick to avoid triggering this. */
20934
20934
  onParameterRowClick(event, item) {
20935
20935
  const target = event.target;
20936
- if (target.closest('cqa-button')) {
20936
+ if (target.closest('button, mat-icon, [aria-label="Edit"]')) {
20937
20937
  return;
20938
20938
  }
20939
20939
  this.onParameterSelect(item.id);
@@ -21038,10 +21038,10 @@ class TestDataModalComponent {
21038
21038
  }
21039
21039
  }
21040
21040
  TestDataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: TEST_DATA_MODAL_REF }, { token: TEST_DATA_MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
21041
- TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, 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-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 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 Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\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 hover:cqa-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(#test-data-help-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=\"test-data-help-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(#test-data-help-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=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-left-0\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\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-0 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 <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <cqa-button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"edit\"\n [text]=\"''\"\n (clicked)=\"onParameterEditClick($event, item.id)\"\n [customClass]=\"'cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB]'\"\n title=\"Edit\"\n aria-label=\"Edit\">\n </cqa-button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (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 <!-- 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\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a href=\"#\" (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 </div>\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: 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: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
21041
+ TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, 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-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 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 Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\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 hover:cqa-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(#test-data-help-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=\"test-data-help-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(#test-data-help-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=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-left-0\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\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-0 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 <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (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 <!-- 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\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a href=\"#\" (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 </div>\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: 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: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
21042
21042
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, decorators: [{
21043
21043
  type: Component,
21044
- args: [{ selector: 'cqa-test-data-modal', 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-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 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 Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\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 hover:cqa-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(#test-data-help-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=\"test-data-help-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(#test-data-help-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=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-left-0\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\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-0 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 <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <cqa-button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"edit\"\n [text]=\"''\"\n (clicked)=\"onParameterEditClick($event, item.id)\"\n [customClass]=\"'cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB]'\"\n title=\"Edit\"\n aria-label=\"Edit\">\n </cqa-button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (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 <!-- 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\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a href=\"#\" (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 </div>\n</div>\n" }]
21044
+ args: [{ selector: 'cqa-test-data-modal', 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-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 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 Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\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 hover:cqa-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(#test-data-help-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=\"test-data-help-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(#test-data-help-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=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-left-0\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\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-0 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 <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (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 <!-- 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\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a href=\"#\" (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 </div>\n</div>\n" }]
21045
21045
  }], ctorParameters: function () {
21046
21046
  return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: TestDataModalRef, decorators: [{
21047
21047
  type: Inject,
@@ -31988,6 +31988,7 @@ class StepBuilderActionComponent {
31988
31988
  }
31989
31989
  // Get environment IDs from template variables (if any environment type variables are selected)
31990
31990
  const environmentIds = ((_a = this.templateVariablesForm) === null || _a === void 0 ? void 0 : _a.getEnvironmentIdsForVariables()) || new Map();
31991
+ const currentTemplateVariables = this.getCurrentTemplateVariables();
31991
31992
  // Sync advanced variables from form to array
31992
31993
  this.advancedSettingsVariables.forEach((variable, index) => {
31993
31994
  var _a;
@@ -32007,7 +32008,8 @@ class StepBuilderActionComponent {
32007
32008
  template: this.selectedTemplate,
32008
32009
  metadata: this.metadata,
32009
32010
  description: this.description,
32010
- templateVariables: this.templateVariables,
32011
+ templateVariables: currentTemplateVariables,
32012
+ testDataList: this.buildTestDataList(currentTemplateVariables),
32011
32013
  advancedSettingsVariables: this.advancedSettingsVariables,
32012
32014
  environmentIds: environmentIds // Map of variable name to environment ID
32013
32015
  };
@@ -32017,6 +32019,84 @@ class StepBuilderActionComponent {
32017
32019
  console.log("environmentIds", environmentIds);
32018
32020
  this.createStep.emit(stepData);
32019
32021
  }
32022
+ getCurrentTemplateVariables() {
32023
+ var _a;
32024
+ const childVariables = (_a = this.templateVariablesForm) === null || _a === void 0 ? void 0 : _a.templateVariables;
32025
+ if (childVariables && childVariables.length > 0) {
32026
+ this.templateVariables = childVariables;
32027
+ return childVariables;
32028
+ }
32029
+ return this.templateVariables || [];
32030
+ }
32031
+ buildTestDataList(variables) {
32032
+ const testDataList = [];
32033
+ for (const variable of variables || []) {
32034
+ const formattedValue = variable === null || variable === void 0 ? void 0 : variable.value;
32035
+ if (formattedValue === undefined || formattedValue === null || formattedValue === '')
32036
+ continue;
32037
+ const item = this.resolveVariableTestDataValue(variable);
32038
+ if (!item.testData)
32039
+ continue;
32040
+ testDataList.push(item);
32041
+ }
32042
+ return testDataList;
32043
+ }
32044
+ resolveVariableTestDataValue(variable) {
32045
+ const formattedValue = (variable === null || variable === void 0 ? void 0 : variable.value) != null ? String(variable.value) : '';
32046
+ const rawValue = (variable === null || variable === void 0 ? void 0 : variable.rawValue) != null && String(variable.rawValue) !== '' ? String(variable.rawValue) : formattedValue;
32047
+ const dataType = (variable === null || variable === void 0 ? void 0 : variable.dataType) || this.parseVariableDataType(formattedValue);
32048
+ const selectedTestDataProfileId = this.resolveSelectedTestDataProfileId(variable);
32049
+ if (dataType === 'parameter') {
32050
+ return Object.assign({ testData: rawValue, testDataType: 'parameter' }, (selectedTestDataProfileId != null && { testDataProfileId: selectedTestDataProfileId }));
32051
+ }
32052
+ if (dataType === 'runtime') {
32053
+ return {
32054
+ testData: rawValue,
32055
+ testDataType: 'runtime',
32056
+ };
32057
+ }
32058
+ if (dataType === 'environment') {
32059
+ return {
32060
+ testData: rawValue,
32061
+ testDataType: 'environment',
32062
+ };
32063
+ }
32064
+ return {
32065
+ testData: formattedValue,
32066
+ testDataType: 'raw',
32067
+ };
32068
+ }
32069
+ resolveSelectedTestDataProfileId(variable) {
32070
+ var _a, _b;
32071
+ if (variable.selectedTestDataProfileId != null && !isNaN(Number(variable.selectedTestDataProfileId))) {
32072
+ return Number(variable.selectedTestDataProfileId);
32073
+ }
32074
+ const variableGroup = (_a = this.templateVariablesForm) === null || _a === void 0 ? void 0 : _a.getVariableFormGroup(variable.name);
32075
+ const selectedProfileValue = (_b = variableGroup === null || variableGroup === void 0 ? void 0 : variableGroup.get('selectedTestDataProfile')) === null || _b === void 0 ? void 0 : _b.value;
32076
+ if (selectedProfileValue != null && selectedProfileValue !== '' && !isNaN(Number(selectedProfileValue))) {
32077
+ return Number(selectedProfileValue);
32078
+ }
32079
+ const selectedProfileName = variable.selectedTestDataProfile || selectedProfileValue;
32080
+ if (selectedProfileName != null && selectedProfileName !== '') {
32081
+ const matchingProfile = this.parameterOptions.find((testData) => {
32082
+ const profileName = testData.name || testData.testDataName;
32083
+ return profileName === selectedProfileName;
32084
+ });
32085
+ if ((matchingProfile === null || matchingProfile === void 0 ? void 0 : matchingProfile.id) != null && !isNaN(Number(matchingProfile.id))) {
32086
+ return Number(matchingProfile.id);
32087
+ }
32088
+ }
32089
+ return undefined;
32090
+ }
32091
+ parseVariableDataType(value) {
32092
+ if (value.startsWith('@|') && value.endsWith('|'))
32093
+ return 'parameter';
32094
+ if (value.startsWith('$|') && value.endsWith('|'))
32095
+ return 'runtime';
32096
+ if (value.startsWith('*|') && value.endsWith('|'))
32097
+ return 'environment';
32098
+ return 'plain-text';
32099
+ }
32020
32100
  toggleAdvanced() {
32021
32101
  this.advancedExpanded = !this.advancedExpanded;
32022
32102
  }