@cqa-lib/cqa-ui 1.1.300 → 1.1.301
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/dynamic-select/dynamic-select-field.component.mjs +25 -6
- package/esm2020/lib/step-builder/step-builder-group/step-builder-group.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +26 -7
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +26 -7
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/dynamic-select/dynamic-select-field.component.d.ts +6 -0
- package/package.json +1 -1
|
@@ -1840,6 +1840,12 @@ class DynamicSelectFieldComponent {
|
|
|
1840
1840
|
* at least once since opening the panel. Prevents auto-load on open.
|
|
1841
1841
|
*/
|
|
1842
1842
|
this.hasScrolledSinceOpen = false;
|
|
1843
|
+
/**
|
|
1844
|
+
* True when the load-more sentinel is currently in view. Used to trigger only when
|
|
1845
|
+
* the sentinel transitions from out-of-view to in-view (user scrolled to bottom again),
|
|
1846
|
+
* not when it stays in view after new data arrives (which would cause repeated API calls).
|
|
1847
|
+
*/
|
|
1848
|
+
this.sentinelCurrentlyInView = false;
|
|
1843
1849
|
this.onPanelScroll = () => {
|
|
1844
1850
|
this.hasScrolledSinceOpen = true;
|
|
1845
1851
|
if (!this.config?.hasMore || this.loadingMore)
|
|
@@ -1848,7 +1854,8 @@ class DynamicSelectFieldComponent {
|
|
|
1848
1854
|
if (!el)
|
|
1849
1855
|
return;
|
|
1850
1856
|
const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 48; // ~3 option rows
|
|
1851
|
-
if (nearBottom) {
|
|
1857
|
+
if (nearBottom && !this.sentinelCurrentlyInView) {
|
|
1858
|
+
this.sentinelCurrentlyInView = true;
|
|
1852
1859
|
this.loadingMore = true;
|
|
1853
1860
|
const key = this.config?.key || '';
|
|
1854
1861
|
const q = this.searchTextByKey[key] || '';
|
|
@@ -1858,6 +1865,9 @@ class DynamicSelectFieldComponent {
|
|
|
1858
1865
|
}
|
|
1859
1866
|
catch { }
|
|
1860
1867
|
}
|
|
1868
|
+
else if (!nearBottom) {
|
|
1869
|
+
this.sentinelCurrentlyInView = false;
|
|
1870
|
+
}
|
|
1861
1871
|
};
|
|
1862
1872
|
}
|
|
1863
1873
|
ngOnInit() {
|
|
@@ -2152,8 +2162,9 @@ class DynamicSelectFieldComponent {
|
|
|
2152
2162
|
catch { }
|
|
2153
2163
|
this.panelScrollEl = undefined;
|
|
2154
2164
|
}
|
|
2155
|
-
// Reset
|
|
2165
|
+
// Reset load-more state when closing
|
|
2156
2166
|
this.loadingMore = false;
|
|
2167
|
+
this.sentinelCurrentlyInView = false;
|
|
2157
2168
|
return;
|
|
2158
2169
|
}
|
|
2159
2170
|
// Focus the search box if enabled
|
|
@@ -2173,6 +2184,8 @@ class DynamicSelectFieldComponent {
|
|
|
2173
2184
|
catch { }
|
|
2174
2185
|
this.searchChange.emit({ key, query: q });
|
|
2175
2186
|
}
|
|
2187
|
+
this.sentinelCurrentlyInView = false;
|
|
2188
|
+
this.hasScrolledSinceOpen = false;
|
|
2176
2189
|
// Setup infinite scroll observer on sentinel
|
|
2177
2190
|
setTimeout(() => this.setupLoadMoreObserver(), 0);
|
|
2178
2191
|
// Also attach a scroll listener fallback for reliable load-more triggers
|
|
@@ -2457,12 +2470,14 @@ class DynamicSelectFieldComponent {
|
|
|
2457
2470
|
this.loadMoreObserver = new IntersectionObserver((entries) => {
|
|
2458
2471
|
for (const entry of entries) {
|
|
2459
2472
|
if (entry.isIntersecting) {
|
|
2460
|
-
//
|
|
2461
|
-
|
|
2473
|
+
// Only trigger when sentinel just came into view (user scrolled to bottom).
|
|
2474
|
+
// If it was already in view (e.g. after new data appended), do not trigger again.
|
|
2475
|
+
const wasOutOfView = !this.sentinelCurrentlyInView;
|
|
2476
|
+
this.sentinelCurrentlyInView = true;
|
|
2477
|
+
if (wasOutOfView && this.hasScrolledSinceOpen && !this.loadingMore && this.config?.hasMore) {
|
|
2462
2478
|
this.loadingMore = true;
|
|
2463
2479
|
const key = this.config?.key || '';
|
|
2464
2480
|
const q = this.searchTextByKey[key] || '';
|
|
2465
|
-
// Emit outputs and invoke optional callbacks
|
|
2466
2481
|
this.loadMore.emit({ key, query: q });
|
|
2467
2482
|
try {
|
|
2468
2483
|
this.config.onLoadMore?.(q);
|
|
@@ -2470,6 +2485,10 @@ class DynamicSelectFieldComponent {
|
|
|
2470
2485
|
catch { }
|
|
2471
2486
|
}
|
|
2472
2487
|
}
|
|
2488
|
+
else {
|
|
2489
|
+
// Sentinel left view (user scrolled up) – allow next load more when they scroll down again
|
|
2490
|
+
this.sentinelCurrentlyInView = false;
|
|
2491
|
+
}
|
|
2473
2492
|
}
|
|
2474
2493
|
}, { root: panelRoot, threshold: 0.1 });
|
|
2475
2494
|
try {
|
|
@@ -36813,10 +36832,10 @@ class StepBuilderGroupComponent {
|
|
|
36813
36832
|
}
|
|
36814
36833
|
}
|
|
36815
36834
|
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 });
|
|
36816
|
-
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" }, 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 -->\n <div *ngIf=\"isLoadingStepGroups\" 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 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>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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"] }] });
|
|
36835
|
+
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" }, 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 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>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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"] }] });
|
|
36817
36836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, decorators: [{
|
|
36818
36837
|
type: Component,
|
|
36819
|
-
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 -->\n <div *ngIf=\"isLoadingStepGroups\" 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 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>\n</div>\n\n", styles: [] }]
|
|
36838
|
+
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 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>\n</div>\n\n", styles: [] }]
|
|
36820
36839
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepGroupOptions: [{
|
|
36821
36840
|
type: Input
|
|
36822
36841
|
}], hasMoreStepGroups: [{
|