@cqa-lib/cqa-ui 1.1.527 → 1.1.528
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/step-builder/step-builder-group/step-builder-group.component.mjs +22 -7
- package/fesm2015/cqa-lib-cqa-ui.mjs +16 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +16 -2
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/step-builder/step-builder-group/step-builder-group.component.d.ts +10 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -47021,6 +47021,16 @@ class StepBuilderGroupComponent {
|
|
|
47021
47021
|
this.isLoadingRuntimeVariables = false;
|
|
47022
47022
|
/** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
|
|
47023
47023
|
this.isCreatingStep = false;
|
|
47024
|
+
/**
|
|
47025
|
+
* When true, render an amber warning banner at the top of the card explaining that any
|
|
47026
|
+
* runtime values typed here will be overridden by the consuming test case. Set this when
|
|
47027
|
+
* the step-group step is being created/edited inside a host test case that is itself a
|
|
47028
|
+
* step group.
|
|
47029
|
+
*/
|
|
47030
|
+
this.showNestedStepGroupWarning = false;
|
|
47031
|
+
/** Optional override for the warning copy. Falls back to a sensible default. */
|
|
47032
|
+
this.nestedStepGroupWarning = 'Parameter names will be used in the test case level where this step group is added. ' +
|
|
47033
|
+
'If you want to set the value in the test case, keep all the parameter values (runtime variables) empty in this step group.';
|
|
47024
47034
|
/** Emit when step is created */
|
|
47025
47035
|
this.createStep = new EventEmitter();
|
|
47026
47036
|
/** Emit when step group is selected to fetch runtime variables */
|
|
@@ -47229,10 +47239,10 @@ class StepBuilderGroupComponent {
|
|
|
47229
47239
|
}
|
|
47230
47240
|
}
|
|
47231
47241
|
StepBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
47232
|
-
StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
47242
|
+
StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep", showNestedStepGroupWarning: "showNestedStepGroupWarning", nestedStepGroupWarning: "nestedStepGroupWarning" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n\n \n <!-- Nested-step-group warning. Visible only when the consumer flips\n `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n <div *ngIf=\"showNestedStepGroupWarning\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n role=\"alert\">\n <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n <span>{{ nestedStepGroupWarning }}</span>\n </div>\n <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
47233
47243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, decorators: [{
|
|
47234
47244
|
type: Component,
|
|
47235
|
-
args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
47245
|
+
args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n\n \n <!-- Nested-step-group warning. Visible only when the consumer flips\n `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n <div *ngIf=\"showNestedStepGroupWarning\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n role=\"alert\">\n <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n <span>{{ nestedStepGroupWarning }}</span>\n </div>\n <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
47236
47246
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepGroupOptions: [{
|
|
47237
47247
|
type: Input
|
|
47238
47248
|
}], hasMoreStepGroups: [{
|
|
@@ -47251,6 +47261,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
47251
47261
|
type: Input
|
|
47252
47262
|
}], isCreatingStep: [{
|
|
47253
47263
|
type: Input
|
|
47264
|
+
}], showNestedStepGroupWarning: [{
|
|
47265
|
+
type: Input
|
|
47266
|
+
}], nestedStepGroupWarning: [{
|
|
47267
|
+
type: Input
|
|
47254
47268
|
}], createStep: [{
|
|
47255
47269
|
type: Output
|
|
47256
47270
|
}], stepGroupSelected: [{
|