@cqa-lib/cqa-ui 1.1.282 → 1.1.284
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.
- package/esm2020/lib/test-case-details/create-step-group/create-step-group.component.mjs +68 -9
- package/esm2020/lib/test-case-details/test-data-modal/test-data-modal.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +74 -13
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +69 -10
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/test-case-details/create-step-group/create-step-group.component.d.ts +6 -2
- package/package.json +1 -1
|
@@ -20874,10 +20874,10 @@ class TestDataModalComponent {
|
|
|
20874
20874
|
}
|
|
20875
20875
|
}
|
|
20876
20876
|
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 });
|
|
20877
|
-
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 <button\n *ngFor=\"let item of parameterListConfig\"\n type=\"button\"\n (click)=\"onParameterSelect(item.id)\"\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]\">\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)=\"$event.stopPropagation(); onParameterEdit(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 </button>\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 <cqa-button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"edit\"\n [text]=\"''\"\n (clicked)=\"$event.stopPropagation(); onEnvironmentEdit(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 </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 });
|
|
20877
|
+
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 <button\n *ngFor=\"let item of parameterListConfig\"\n type=\"button\"\n (click)=\"onParameterSelect(item.id)\"\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]\">\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)=\"$event.stopPropagation(); onParameterEdit(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 </button>\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 });
|
|
20878
20878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, decorators: [{
|
|
20879
20879
|
type: Component,
|
|
20880
|
-
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 <button\n *ngFor=\"let item of parameterListConfig\"\n type=\"button\"\n (click)=\"onParameterSelect(item.id)\"\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]\">\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)=\"$event.stopPropagation(); onParameterEdit(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 </button>\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 <cqa-button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"edit\"\n [text]=\"''\"\n (clicked)=\"$event.stopPropagation(); onEnvironmentEdit(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 </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" }]
|
|
20880
|
+
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 <button\n *ngFor=\"let item of parameterListConfig\"\n type=\"button\"\n (click)=\"onParameterSelect(item.id)\"\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]\">\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)=\"$event.stopPropagation(); onParameterEdit(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 </button>\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" }]
|
|
20881
20881
|
}], ctorParameters: function () {
|
|
20882
20882
|
return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: TestDataModalRef, decorators: [{
|
|
20883
20883
|
type: Inject,
|
|
@@ -25875,6 +25875,8 @@ class CreateStepGroupComponent {
|
|
|
25875
25875
|
constructor(fb) {
|
|
25876
25876
|
this.fb = fb;
|
|
25877
25877
|
this.stepsToGroup = [];
|
|
25878
|
+
/** Pre-computed display labels from host (same order as stepsToGroup). When provided, used instead of computing from step. */
|
|
25879
|
+
this.stepLabels = [];
|
|
25878
25880
|
this.createGroup = new EventEmitter();
|
|
25879
25881
|
this.cancelled = new EventEmitter();
|
|
25880
25882
|
this.form = this.fb.group({
|
|
@@ -25891,8 +25893,17 @@ class CreateStepGroupComponent {
|
|
|
25891
25893
|
? 'Group 1 selected step into a container'
|
|
25892
25894
|
: `Group ${n} selected steps into a container`;
|
|
25893
25895
|
}
|
|
25894
|
-
/** Display label for a step in the "Steps to group" list (same
|
|
25896
|
+
/** Display label for a step in the "Steps to group" list (same as main step list - use stepLabels when provided). */
|
|
25895
25897
|
getStepDisplayLabel(step, index) {
|
|
25898
|
+
var _a;
|
|
25899
|
+
if (((_a = this.stepLabels) === null || _a === void 0 ? void 0 : _a.length) > index && this.stepLabels[index] != null && this.stepLabels[index] !== '') {
|
|
25900
|
+
return this.stepLabels[index];
|
|
25901
|
+
}
|
|
25902
|
+
// Prefer step.action - it matches the full display in the step list (e.g. "Enter @|password| in the Email")
|
|
25903
|
+
const rawAction = step.action != null && String(step.action).trim() !== '' ? String(step.action) : '';
|
|
25904
|
+
if (rawAction) {
|
|
25905
|
+
return this.stripHtml(rawAction);
|
|
25906
|
+
}
|
|
25896
25907
|
if (isNormalStepConfig(step)) {
|
|
25897
25908
|
return this.getNormalStepLabel(step);
|
|
25898
25909
|
}
|
|
@@ -25916,28 +25927,76 @@ class CreateStepGroupComponent {
|
|
|
25916
25927
|
}
|
|
25917
25928
|
return `Step ${index + 1}`;
|
|
25918
25929
|
}
|
|
25930
|
+
/** Strip HTML tags for plain-text display (action may contain spans for badges). */
|
|
25931
|
+
stripHtml(html) {
|
|
25932
|
+
if (typeof document !== 'undefined') {
|
|
25933
|
+
const tmp = document.createElement('div');
|
|
25934
|
+
tmp.innerHTML = html;
|
|
25935
|
+
return (tmp.textContent || tmp.innerText || '').trim();
|
|
25936
|
+
}
|
|
25937
|
+
return html.replace(/<[^>]*>/g, '').replace(/ /g, ' ').trim();
|
|
25938
|
+
}
|
|
25919
25939
|
getNormalStepLabel(step) {
|
|
25920
|
-
var _a, _b, _c;
|
|
25940
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
25921
25941
|
const params = (_a = step.parameters) !== null && _a !== void 0 ? _a : [];
|
|
25922
25942
|
const getParam = (name) => params.find((p) => { var _a; return ((_a = p.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === name.toLowerCase(); });
|
|
25923
25943
|
const val = (p) => { var _a, _b; return (_b = (_a = p === null || p === void 0 ? void 0 : p.displayValue) !== null && _a !== void 0 ? _a : p === null || p === void 0 ? void 0 : p.value) !== null && _b !== void 0 ? _b : ''; };
|
|
25944
|
+
/** Use raw value (strip surrounding quotes from displayValue) for building full sentences */
|
|
25945
|
+
const rawVal = (p) => {
|
|
25946
|
+
var _a, _b;
|
|
25947
|
+
const v = (_b = (_a = p === null || p === void 0 ? void 0 : p.value) !== null && _a !== void 0 ? _a : p === null || p === void 0 ? void 0 : p.displayValue) !== null && _b !== void 0 ? _b : '';
|
|
25948
|
+
const s = String(v);
|
|
25949
|
+
return s.replace(/^["']|["']$/g, '').trim() || s;
|
|
25950
|
+
};
|
|
25924
25951
|
switch (step.eventType) {
|
|
25925
25952
|
case 'navigate': {
|
|
25926
|
-
const url = getParam('url');
|
|
25927
|
-
return url ? `Navigate to ${
|
|
25953
|
+
const url = (_b = getParam('url')) !== null && _b !== void 0 ? _b : params.find((p) => /url|baseUrl/i.test(p.name || ''));
|
|
25954
|
+
return url ? `Navigate to ${rawVal(url)}` : 'Navigate';
|
|
25955
|
+
}
|
|
25956
|
+
case 'enter': {
|
|
25957
|
+
const valueParam = getParam('value');
|
|
25958
|
+
const labelParam = getParam('label');
|
|
25959
|
+
const value = rawVal(valueParam);
|
|
25960
|
+
const label = rawVal(labelParam);
|
|
25961
|
+
if (value && label)
|
|
25962
|
+
return `Enter ${value} in the ${label}`;
|
|
25963
|
+
if (value)
|
|
25964
|
+
return `Enter ${value}`;
|
|
25965
|
+
if (label)
|
|
25966
|
+
return `Enter in the ${label}`;
|
|
25967
|
+
return 'Enter';
|
|
25928
25968
|
}
|
|
25929
25969
|
case 'ai-agent': {
|
|
25930
|
-
const instructions = (
|
|
25970
|
+
const instructions = (_c = getParam('instructions')) !== null && _c !== void 0 ? _c : getParam('description');
|
|
25931
25971
|
return val(instructions) || 'AI Agent step';
|
|
25932
25972
|
}
|
|
25933
|
-
case 'type':
|
|
25934
|
-
|
|
25935
|
-
|
|
25936
|
-
|
|
25973
|
+
case 'type': {
|
|
25974
|
+
const textParam = (_d = getParam('text')) !== null && _d !== void 0 ? _d : getParam('value');
|
|
25975
|
+
const elementParam = (_f = (_e = getParam('element')) !== null && _e !== void 0 ? _e : getParam('label')) !== null && _f !== void 0 ? _f : getParam('selector');
|
|
25976
|
+
const text = rawVal(textParam);
|
|
25977
|
+
const element = rawVal(elementParam);
|
|
25978
|
+
if (text && element)
|
|
25979
|
+
return `Enter ${text} in the ${element}`;
|
|
25980
|
+
if (text)
|
|
25981
|
+
return `Enter ${text}`;
|
|
25982
|
+
return 'Type';
|
|
25983
|
+
}
|
|
25984
|
+
case 'click': {
|
|
25985
|
+
const selector = (_g = getParam('element')) !== null && _g !== void 0 ? _g : getParam('selector');
|
|
25986
|
+
return selector ? `Click on ${rawVal(selector)}` : 'Click';
|
|
25987
|
+
}
|
|
25988
|
+
case 'doubleClick': {
|
|
25989
|
+
const selector = (_h = getParam('element')) !== null && _h !== void 0 ? _h : getParam('selector');
|
|
25990
|
+
return selector ? `Double click on ${rawVal(selector)}` : 'Double click';
|
|
25991
|
+
}
|
|
25992
|
+
case 'pressEnter': {
|
|
25993
|
+
const element = getParam('element');
|
|
25994
|
+
return element ? `Press Enter on ${rawVal(element)}` : 'Press Enter';
|
|
25995
|
+
}
|
|
25937
25996
|
case 'verify':
|
|
25938
25997
|
return val(getParam('description')) || 'Verify';
|
|
25939
25998
|
case 'custom': {
|
|
25940
|
-
const desc = (
|
|
25999
|
+
const desc = (_j = getParam('description')) !== null && _j !== void 0 ? _j : getParam('action');
|
|
25941
26000
|
return val(desc) || 'Custom step';
|
|
25942
26001
|
}
|
|
25943
26002
|
default:
|
|
@@ -25962,12 +26021,14 @@ class CreateStepGroupComponent {
|
|
|
25962
26021
|
}
|
|
25963
26022
|
}
|
|
25964
26023
|
CreateStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
25965
|
-
CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup" }, outputs: { createGroup: "createGroup", cancelled: "cancelled" }, 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-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full 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=\"Create group\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateGroup()\">\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: 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"] }] });
|
|
26024
|
+
CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup", stepLabels: "stepLabels" }, outputs: { createGroup: "createGroup", cancelled: "cancelled" }, 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-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full 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=\"Create group\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateGroup()\">\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: 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"] }] });
|
|
25966
26025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, decorators: [{
|
|
25967
26026
|
type: Component,
|
|
25968
26027
|
args: [{ selector: 'cqa-create-step-group', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full 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=\"Create group\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateGroup()\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
|
|
25969
26028
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepsToGroup: [{
|
|
25970
26029
|
type: Input
|
|
26030
|
+
}], stepLabels: [{
|
|
26031
|
+
type: Input
|
|
25971
26032
|
}], createGroup: [{
|
|
25972
26033
|
type: Output
|
|
25973
26034
|
}], cancelled: [{
|