@cqa-lib/cqa-ui 1.1.167 → 1.1.169
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-action/step-builder-action.component.mjs +7 -4
- package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +391 -0
- package/esm2020/lib/ui-kit.module.mjs +14 -5
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +384 -8
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +401 -8
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/step-builder/step-builder-action/step-builder-action.component.d.ts +2 -1
- package/lib/step-builder/step-builder-loop/step-builder-loop.component.d.ts +114 -0
- package/lib/ui-kit.module.d.ts +21 -19
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -20,6 +20,7 @@ import * as i3$3 from '@angular/material/checkbox';
|
|
|
20
20
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
21
21
|
import * as i4 from '@angular/material/radio';
|
|
22
22
|
import { MatRadioModule } from '@angular/material/radio';
|
|
23
|
+
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
23
24
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
25
|
import * as i1$5 from '@angular/material/progress-spinner';
|
|
25
26
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
@@ -15764,6 +15765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15764
15765
|
class StepBuilderActionComponent {
|
|
15765
15766
|
constructor(fb) {
|
|
15766
15767
|
this.fb = fb;
|
|
15768
|
+
this.showHeader = true;
|
|
15767
15769
|
/** List of action templates to display */
|
|
15768
15770
|
this.templates = [];
|
|
15769
15771
|
/** Placeholder text for search input */
|
|
@@ -15913,11 +15915,13 @@ class StepBuilderActionComponent {
|
|
|
15913
15915
|
}
|
|
15914
15916
|
}
|
|
15915
15917
|
StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
15916
|
-
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-
|
|
15918
|
+
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n <!-- Header -->\n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
15917
15919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
|
|
15918
15920
|
type: Component,
|
|
15919
|
-
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-
|
|
15920
|
-
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: {
|
|
15921
|
+
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n <!-- Header -->\n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", styles: [] }]
|
|
15922
|
+
}], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { showHeader: [{
|
|
15923
|
+
type: Input
|
|
15924
|
+
}], templates: [{
|
|
15921
15925
|
type: Input
|
|
15922
15926
|
}], searchPlaceholder: [{
|
|
15923
15927
|
type: Input
|
|
@@ -15933,6 +15937,388 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15933
15937
|
type: Output
|
|
15934
15938
|
}] } });
|
|
15935
15939
|
|
|
15940
|
+
class StepBuilderLoopComponent {
|
|
15941
|
+
constructor() {
|
|
15942
|
+
/** Currently selected loop type */
|
|
15943
|
+
this.loopType = 'for';
|
|
15944
|
+
/** Options for the select option dropdown */
|
|
15945
|
+
this.selectOptions = [
|
|
15946
|
+
{ value: 'dataProfile', label: 'Data Profile' },
|
|
15947
|
+
{ value: 'runTime', label: 'Run Time' }
|
|
15948
|
+
];
|
|
15949
|
+
/** Options for the data profile dropdown - accepts DataProfileOption objects */
|
|
15950
|
+
this.dataProfileOptions = [];
|
|
15951
|
+
/** Indicates if more data profiles are available for loading */
|
|
15952
|
+
this.hasMoreDataProfiles = false;
|
|
15953
|
+
/** Loading state for data profiles */
|
|
15954
|
+
this.isLoadingDataProfiles = false;
|
|
15955
|
+
/** Function to handle variable processing or custom logic. Can be passed from parent component. */
|
|
15956
|
+
this.setWhileTemplateVariables = () => { return []; };
|
|
15957
|
+
/** Emit when step is created */
|
|
15958
|
+
this.createStep = new EventEmitter();
|
|
15959
|
+
/** Emit when cancelled */
|
|
15960
|
+
this.cancelled = new EventEmitter();
|
|
15961
|
+
/** Emit when loop type changes */
|
|
15962
|
+
this.loopTypeChange = new EventEmitter();
|
|
15963
|
+
/** Emit when more data profiles need to be loaded */
|
|
15964
|
+
this.loadMoreDataProfiles = new EventEmitter();
|
|
15965
|
+
/** Emit when data profile search query changes */
|
|
15966
|
+
this.searchDataProfiles = new EventEmitter();
|
|
15967
|
+
this.whileTemplates = [];
|
|
15968
|
+
this.whileSearchPlaceholder = 'Search While';
|
|
15969
|
+
this.whileSearchValue = '';
|
|
15970
|
+
this.selectedWhileTemplate = null;
|
|
15971
|
+
this.selectedLoopType = 'for';
|
|
15972
|
+
// Internal state for managing loop indices
|
|
15973
|
+
this.selectedDataProfile = null;
|
|
15974
|
+
this.startArray = [];
|
|
15975
|
+
this.endArray = [];
|
|
15976
|
+
// Initialize single FormGroup with all fields
|
|
15977
|
+
this.loopForm = new FormGroup({
|
|
15978
|
+
selectOption: new FormControl(null),
|
|
15979
|
+
dataProfile: new FormControl(null),
|
|
15980
|
+
loopStart: new FormControl(null),
|
|
15981
|
+
loopEnd: new FormControl(null),
|
|
15982
|
+
runTime: new FormControl(null)
|
|
15983
|
+
});
|
|
15984
|
+
// Initialize configs
|
|
15985
|
+
this.selectOptionConfig = {
|
|
15986
|
+
key: 'selectOption',
|
|
15987
|
+
placeholder: 'select option',
|
|
15988
|
+
selectedValue: 'dataProfile',
|
|
15989
|
+
multiple: false,
|
|
15990
|
+
searchable: false,
|
|
15991
|
+
options: this.selectOptions
|
|
15992
|
+
};
|
|
15993
|
+
this.dataProfileConfig = {
|
|
15994
|
+
key: 'dataProfile',
|
|
15995
|
+
placeholder: 'data profile',
|
|
15996
|
+
multiple: false,
|
|
15997
|
+
searchable: true,
|
|
15998
|
+
serverSearch: true,
|
|
15999
|
+
hasMore: this.hasMoreDataProfiles,
|
|
16000
|
+
isLoading: this.isLoadingDataProfiles,
|
|
16001
|
+
options: [],
|
|
16002
|
+
onChange: (value) => {
|
|
16003
|
+
this.onDataProfileChange(value);
|
|
16004
|
+
},
|
|
16005
|
+
onSearch: (query) => {
|
|
16006
|
+
this.onSearchDataProfiles(query);
|
|
16007
|
+
},
|
|
16008
|
+
onLoadMore: (query) => {
|
|
16009
|
+
this.loadMoreDataProfiles.emit(query || '');
|
|
16010
|
+
}
|
|
16011
|
+
};
|
|
16012
|
+
this.loopStartConfig = {
|
|
16013
|
+
key: 'loopStart',
|
|
16014
|
+
placeholder: 'loop start',
|
|
16015
|
+
multiple: false,
|
|
16016
|
+
searchable: false,
|
|
16017
|
+
options: [],
|
|
16018
|
+
onChange: (value) => {
|
|
16019
|
+
this.onLoopStartChange(value);
|
|
16020
|
+
}
|
|
16021
|
+
};
|
|
16022
|
+
this.loopEndConfig = {
|
|
16023
|
+
key: 'loopEnd',
|
|
16024
|
+
placeholder: 'loop end',
|
|
16025
|
+
multiple: false,
|
|
16026
|
+
searchable: false,
|
|
16027
|
+
options: [],
|
|
16028
|
+
onChange: (value) => {
|
|
16029
|
+
// Handle change if needed
|
|
16030
|
+
}
|
|
16031
|
+
};
|
|
16032
|
+
}
|
|
16033
|
+
ngOnInit() {
|
|
16034
|
+
this.selectedLoopType = this.loopType;
|
|
16035
|
+
this.updateConfigs();
|
|
16036
|
+
}
|
|
16037
|
+
ngOnChanges(changes) {
|
|
16038
|
+
console.log("this.whileTemplates", this.whileTemplates);
|
|
16039
|
+
if (changes['selectOptions']) {
|
|
16040
|
+
this.updateConfigs();
|
|
16041
|
+
}
|
|
16042
|
+
if (changes['dataProfileOptions']) {
|
|
16043
|
+
this.updateConfigs();
|
|
16044
|
+
// If a data profile is already selected, update loop indices
|
|
16045
|
+
const currentProfileId = this.loopForm.get('dataProfile')?.value;
|
|
16046
|
+
if (currentProfileId) {
|
|
16047
|
+
this.onDataProfileChange(currentProfileId);
|
|
16048
|
+
}
|
|
16049
|
+
}
|
|
16050
|
+
if (changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles']) {
|
|
16051
|
+
this.updateDataProfileConfig();
|
|
16052
|
+
}
|
|
16053
|
+
if (changes['loopType']) {
|
|
16054
|
+
this.selectedLoopType = this.loopType;
|
|
16055
|
+
}
|
|
16056
|
+
// Note: loopStartOptions and loopEndOptions are now calculated dynamically
|
|
16057
|
+
// so they don't need to be updated from inputs
|
|
16058
|
+
}
|
|
16059
|
+
updateConfigs() {
|
|
16060
|
+
// Convert DataProfileOption[] to SelectOption[]
|
|
16061
|
+
this.dataProfileConfig = {
|
|
16062
|
+
...this.dataProfileConfig,
|
|
16063
|
+
options: this.convertDataProfileOptionsToSelectOptions(this.dataProfileOptions),
|
|
16064
|
+
hasMore: this.hasMoreDataProfiles,
|
|
16065
|
+
isLoading: this.isLoadingDataProfiles,
|
|
16066
|
+
onChange: (value) => {
|
|
16067
|
+
this.onDataProfileChange(value);
|
|
16068
|
+
},
|
|
16069
|
+
onSearch: (query) => {
|
|
16070
|
+
this.onSearchDataProfiles(query);
|
|
16071
|
+
},
|
|
16072
|
+
onLoadMore: (query) => {
|
|
16073
|
+
this.loadMoreDataProfiles.emit(query || '');
|
|
16074
|
+
}
|
|
16075
|
+
};
|
|
16076
|
+
// Loop start and end options are updated when data profile is selected
|
|
16077
|
+
this.updateLoopIndexOptions();
|
|
16078
|
+
}
|
|
16079
|
+
convertDataProfileOptionsToSelectOptions(options) {
|
|
16080
|
+
return options.map(option => ({
|
|
16081
|
+
id: option.id,
|
|
16082
|
+
value: option.id,
|
|
16083
|
+
name: option.name,
|
|
16084
|
+
label: option.name
|
|
16085
|
+
}));
|
|
16086
|
+
}
|
|
16087
|
+
/**
|
|
16088
|
+
* Handle data profile selection and update loop start/end options
|
|
16089
|
+
*/
|
|
16090
|
+
onDataProfileChange(profileId) {
|
|
16091
|
+
const selectedProfile = this.dataProfileOptions.find(profile => profile.id === profileId || String(profile.id) === String(profileId));
|
|
16092
|
+
if (selectedProfile) {
|
|
16093
|
+
this.selectedDataProfile = selectedProfile;
|
|
16094
|
+
this.updateLoopIndicesFromProfile(selectedProfile);
|
|
16095
|
+
}
|
|
16096
|
+
else {
|
|
16097
|
+
this.selectedDataProfile = null;
|
|
16098
|
+
this.startArray = [];
|
|
16099
|
+
this.endArray = [];
|
|
16100
|
+
this.updateLoopIndexOptions();
|
|
16101
|
+
}
|
|
16102
|
+
}
|
|
16103
|
+
/**
|
|
16104
|
+
* Calculate loop indices based on selected data profile
|
|
16105
|
+
*/
|
|
16106
|
+
updateLoopIndicesFromProfile(profile) {
|
|
16107
|
+
// Calculate data length from data array or use provided dataLength
|
|
16108
|
+
let dataSetLength = 1;
|
|
16109
|
+
if (profile.data && Array.isArray(profile.data)) {
|
|
16110
|
+
dataSetLength = profile.data.length;
|
|
16111
|
+
}
|
|
16112
|
+
else if (profile.dataLength && profile.dataLength > 0) {
|
|
16113
|
+
dataSetLength = profile.dataLength;
|
|
16114
|
+
}
|
|
16115
|
+
// Create start array from 1 to dataSetLength
|
|
16116
|
+
this.startArray = Array.from({ length: dataSetLength }, (_, i) => i + 1);
|
|
16117
|
+
// Initialize end array same as start array
|
|
16118
|
+
// End array will be updated when start index is selected
|
|
16119
|
+
this.endArray = [...this.startArray];
|
|
16120
|
+
// Set default values if form is empty
|
|
16121
|
+
const currentStart = this.loopForm.get('loopStart')?.value;
|
|
16122
|
+
const currentEnd = this.loopForm.get('loopEnd')?.value;
|
|
16123
|
+
if (!currentStart && this.startArray.length > 0) {
|
|
16124
|
+
this.loopForm.get('loopStart')?.setValue(this.startArray[0]);
|
|
16125
|
+
}
|
|
16126
|
+
if (!currentEnd && this.endArray.length > 0) {
|
|
16127
|
+
this.loopForm.get('loopEnd')?.setValue(this.endArray[this.endArray.length - 1]);
|
|
16128
|
+
}
|
|
16129
|
+
this.updateLoopIndexOptions();
|
|
16130
|
+
}
|
|
16131
|
+
/**
|
|
16132
|
+
* Handle loop start change and update end options
|
|
16133
|
+
*/
|
|
16134
|
+
onLoopStartChange(startIndex) {
|
|
16135
|
+
if (!this.selectedDataProfile || !startIndex) {
|
|
16136
|
+
this.endArray = [...this.startArray];
|
|
16137
|
+
this.updateLoopIndexOptions();
|
|
16138
|
+
return;
|
|
16139
|
+
}
|
|
16140
|
+
const startIdx = typeof startIndex === 'string' ? parseInt(startIndex) : startIndex;
|
|
16141
|
+
if (isNaN(startIdx) || startIdx < 1) {
|
|
16142
|
+
this.endArray = [...this.startArray];
|
|
16143
|
+
}
|
|
16144
|
+
else {
|
|
16145
|
+
// End array should be from startIndex to end of data
|
|
16146
|
+
// Based on reference: endArray = startArray.splice(startIndex - 1, startArray.length)
|
|
16147
|
+
const startArrayCopy = [...this.startArray];
|
|
16148
|
+
this.endArray = startArrayCopy.slice(startIdx - 1);
|
|
16149
|
+
}
|
|
16150
|
+
// Auto-update end index if current end is invalid
|
|
16151
|
+
const currentEnd = this.loopForm.get('loopEnd')?.value;
|
|
16152
|
+
const endIdx = typeof currentEnd === 'string' ? parseInt(currentEnd) : currentEnd;
|
|
16153
|
+
if (!currentEnd || isNaN(endIdx) || endIdx < startIdx) {
|
|
16154
|
+
if (this.endArray.length > 0) {
|
|
16155
|
+
this.loopForm.get('loopEnd')?.setValue(this.endArray[this.endArray.length - 1]);
|
|
16156
|
+
}
|
|
16157
|
+
}
|
|
16158
|
+
this.updateLoopIndexOptions();
|
|
16159
|
+
}
|
|
16160
|
+
/**
|
|
16161
|
+
* Update loop start and end config options
|
|
16162
|
+
*/
|
|
16163
|
+
updateLoopIndexOptions() {
|
|
16164
|
+
// Convert startArray to SelectOptions
|
|
16165
|
+
const startOptions = this.startArray.map(idx => ({
|
|
16166
|
+
id: idx,
|
|
16167
|
+
value: idx,
|
|
16168
|
+
name: String(idx),
|
|
16169
|
+
label: String(idx)
|
|
16170
|
+
}));
|
|
16171
|
+
// Convert endArray to SelectOptions
|
|
16172
|
+
const endOptions = this.endArray.map(idx => ({
|
|
16173
|
+
id: idx,
|
|
16174
|
+
value: idx,
|
|
16175
|
+
name: String(idx),
|
|
16176
|
+
label: String(idx)
|
|
16177
|
+
}));
|
|
16178
|
+
this.loopStartConfig = {
|
|
16179
|
+
...this.loopStartConfig,
|
|
16180
|
+
options: [{ id: -1, value: -1, name: 'Start', label: 'Start' }, ...startOptions],
|
|
16181
|
+
onChange: (value) => {
|
|
16182
|
+
this.onLoopStartChange(value);
|
|
16183
|
+
}
|
|
16184
|
+
};
|
|
16185
|
+
this.loopEndConfig = {
|
|
16186
|
+
...this.loopEndConfig,
|
|
16187
|
+
options: [...endOptions, { id: -1, value: -1, name: 'End', label: 'End' }],
|
|
16188
|
+
onChange: (value) => {
|
|
16189
|
+
// Handle change if needed
|
|
16190
|
+
}
|
|
16191
|
+
};
|
|
16192
|
+
}
|
|
16193
|
+
onLoopTypeChange(type) {
|
|
16194
|
+
const loopType = type;
|
|
16195
|
+
this.selectedLoopType = loopType;
|
|
16196
|
+
this.loopTypeChange.emit(loopType);
|
|
16197
|
+
}
|
|
16198
|
+
onCancel() {
|
|
16199
|
+
this.resetForm();
|
|
16200
|
+
this.cancelled.emit();
|
|
16201
|
+
}
|
|
16202
|
+
onCreateStep() {
|
|
16203
|
+
const formValue = this.loopForm.value;
|
|
16204
|
+
if (this.selectedLoopType === 'while') {
|
|
16205
|
+
if (!this.selectedWhileTemplate) {
|
|
16206
|
+
return;
|
|
16207
|
+
}
|
|
16208
|
+
}
|
|
16209
|
+
const stepData = {
|
|
16210
|
+
selectedLoopType: this.selectedLoopType,
|
|
16211
|
+
loopType: this.selectedLoopType,
|
|
16212
|
+
selectOption: formValue.selectOption || undefined,
|
|
16213
|
+
dataProfile: formValue.dataProfile || undefined,
|
|
16214
|
+
loopStart: formValue.loopStart || undefined,
|
|
16215
|
+
loopEnd: formValue.loopEnd || undefined,
|
|
16216
|
+
runTime: formValue.runTime || undefined,
|
|
16217
|
+
whileTemplate: this.selectedWhileTemplate || undefined
|
|
16218
|
+
};
|
|
16219
|
+
console.log('stepData', stepData);
|
|
16220
|
+
this.createStep.emit(stepData);
|
|
16221
|
+
}
|
|
16222
|
+
createWhileStep(event) {
|
|
16223
|
+
console.log('createWhileStep', event);
|
|
16224
|
+
const stepData = {
|
|
16225
|
+
selectedLoopType: this.selectedLoopType,
|
|
16226
|
+
loopType: this.selectedLoopType,
|
|
16227
|
+
event: event
|
|
16228
|
+
};
|
|
16229
|
+
console.log('stepData', stepData);
|
|
16230
|
+
this.createStep.emit(stepData);
|
|
16231
|
+
}
|
|
16232
|
+
/**
|
|
16233
|
+
* Handle search event for data profiles
|
|
16234
|
+
*/
|
|
16235
|
+
onSearchDataProfiles(query) {
|
|
16236
|
+
this.searchDataProfiles.emit(query);
|
|
16237
|
+
}
|
|
16238
|
+
/**
|
|
16239
|
+
* Handle loadMore event for data profiles
|
|
16240
|
+
*/
|
|
16241
|
+
onLoadMoreDataProfiles(event) {
|
|
16242
|
+
this.loadMoreDataProfiles.emit(event.query);
|
|
16243
|
+
}
|
|
16244
|
+
/**
|
|
16245
|
+
* Update data profile config when loading state or hasMore changes
|
|
16246
|
+
*/
|
|
16247
|
+
updateDataProfileConfig() {
|
|
16248
|
+
if (this.dataProfileConfig) {
|
|
16249
|
+
this.dataProfileConfig = {
|
|
16250
|
+
...this.dataProfileConfig,
|
|
16251
|
+
hasMore: this.hasMoreDataProfiles,
|
|
16252
|
+
isLoading: this.isLoadingDataProfiles
|
|
16253
|
+
};
|
|
16254
|
+
}
|
|
16255
|
+
}
|
|
16256
|
+
resetForm() {
|
|
16257
|
+
this.selectedLoopType = 'for';
|
|
16258
|
+
this.selectedDataProfile = null;
|
|
16259
|
+
this.startArray = [];
|
|
16260
|
+
this.endArray = [];
|
|
16261
|
+
this.loopForm.reset({
|
|
16262
|
+
selectOption: null,
|
|
16263
|
+
dataProfile: null,
|
|
16264
|
+
loopStart: null,
|
|
16265
|
+
loopEnd: null
|
|
16266
|
+
});
|
|
16267
|
+
this.updateLoopIndexOptions();
|
|
16268
|
+
}
|
|
16269
|
+
onWhileSearchChange(event) {
|
|
16270
|
+
this.whileSearchValue = event;
|
|
16271
|
+
this.filterWhileTemplates(event);
|
|
16272
|
+
}
|
|
16273
|
+
onWhileSearchSubmit(event) {
|
|
16274
|
+
this.onWhileSearchChange(event);
|
|
16275
|
+
}
|
|
16276
|
+
onWhileSearchCleared() {
|
|
16277
|
+
this.whileSearchValue = '';
|
|
16278
|
+
this.filterWhileTemplates('');
|
|
16279
|
+
}
|
|
16280
|
+
filterWhileTemplates(query) {
|
|
16281
|
+
this.whileTemplates = this.whileTemplates.filter(template => template.htmlGrammar.toLowerCase().includes(query.toLowerCase()) || template.naturalText.toLowerCase().includes(query.toLowerCase()));
|
|
16282
|
+
}
|
|
16283
|
+
selectWhileTemplate(template) {
|
|
16284
|
+
this.selectedWhileTemplate = template;
|
|
16285
|
+
}
|
|
16286
|
+
}
|
|
16287
|
+
StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16288
|
+
StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Loop Test Step\n </h2>\n\n <!-- Loop Type Selection -->\n <div class=\"cqa-mb-4\">\n <cqa-segment-control\n [segments]=\"[\n { label: 'For', value: 'for' },\n { label: 'While', value: 'while' }\n ]\"\n [value]=\"selectedLoopType\"\n (valueChange)=\"onLoopTypeChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action [showHeader]=\"false\" [templates]=\"whileTemplates\" [setTemplateVariables]=\"setWhileTemplateVariables\" [searchPlaceholder]=\"whileSearchPlaceholder\" (templateChanged)=\"selectWhileTemplate($event)\" (createStep)=\"createWhileStep($event)\"></cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n text=\"Create Step\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate"], outputs: ["templateChanged", "createStep", "cancelled"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
16289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
|
|
16290
|
+
type: Component,
|
|
16291
|
+
args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Loop Test Step\n </h2>\n\n <!-- Loop Type Selection -->\n <div class=\"cqa-mb-4\">\n <cqa-segment-control\n [segments]=\"[\n { label: 'For', value: 'for' },\n { label: 'While', value: 'while' }\n ]\"\n [value]=\"selectedLoopType\"\n (valueChange)=\"onLoopTypeChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action [showHeader]=\"false\" [templates]=\"whileTemplates\" [setTemplateVariables]=\"setWhileTemplateVariables\" [searchPlaceholder]=\"whileSearchPlaceholder\" (templateChanged)=\"selectWhileTemplate($event)\" (createStep)=\"createWhileStep($event)\"></cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n text=\"Create Step\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
|
|
16292
|
+
}], ctorParameters: function () { return []; }, propDecorators: { loopType: [{
|
|
16293
|
+
type: Input
|
|
16294
|
+
}], selectOptions: [{
|
|
16295
|
+
type: Input
|
|
16296
|
+
}], dataProfileOptions: [{
|
|
16297
|
+
type: Input
|
|
16298
|
+
}], hasMoreDataProfiles: [{
|
|
16299
|
+
type: Input
|
|
16300
|
+
}], isLoadingDataProfiles: [{
|
|
16301
|
+
type: Input
|
|
16302
|
+
}], setWhileTemplateVariables: [{
|
|
16303
|
+
type: Input
|
|
16304
|
+
}], createStep: [{
|
|
16305
|
+
type: Output
|
|
16306
|
+
}], cancelled: [{
|
|
16307
|
+
type: Output
|
|
16308
|
+
}], loopTypeChange: [{
|
|
16309
|
+
type: Output
|
|
16310
|
+
}], loadMoreDataProfiles: [{
|
|
16311
|
+
type: Output
|
|
16312
|
+
}], searchDataProfiles: [{
|
|
16313
|
+
type: Output
|
|
16314
|
+
}], whileTemplates: [{
|
|
16315
|
+
type: Input
|
|
16316
|
+
}], whileSearchPlaceholder: [{
|
|
16317
|
+
type: Input
|
|
16318
|
+
}], whileSearchValue: [{
|
|
16319
|
+
type: Input
|
|
16320
|
+
}] } });
|
|
16321
|
+
|
|
15936
16322
|
class UiKitModule {
|
|
15937
16323
|
constructor(iconRegistry) {
|
|
15938
16324
|
iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
@@ -16022,7 +16408,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
16022
16408
|
TestCaseScreenshotStepComponent,
|
|
16023
16409
|
TestCaseCustomCodeStepComponent,
|
|
16024
16410
|
LiveConversationComponent,
|
|
16025
|
-
StepBuilderActionComponent
|
|
16411
|
+
StepBuilderActionComponent,
|
|
16412
|
+
StepBuilderLoopComponent], imports: [CommonModule,
|
|
16026
16413
|
FormsModule,
|
|
16027
16414
|
ReactiveFormsModule,
|
|
16028
16415
|
MatIconModule,
|
|
@@ -16033,6 +16420,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
16033
16420
|
MatOptionModule,
|
|
16034
16421
|
MatCheckboxModule,
|
|
16035
16422
|
MatRadioModule,
|
|
16423
|
+
MatSlideToggleModule,
|
|
16036
16424
|
MatDatepickerModule,
|
|
16037
16425
|
MatNativeDateModule,
|
|
16038
16426
|
MatProgressSpinnerModule,
|
|
@@ -16123,7 +16511,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
16123
16511
|
TestCaseScreenshotStepComponent,
|
|
16124
16512
|
TestCaseCustomCodeStepComponent,
|
|
16125
16513
|
LiveConversationComponent,
|
|
16126
|
-
StepBuilderActionComponent
|
|
16514
|
+
StepBuilderActionComponent,
|
|
16515
|
+
StepBuilderLoopComponent] });
|
|
16127
16516
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
16128
16517
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer },
|
|
16129
16518
|
{
|
|
@@ -16171,6 +16560,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
|
|
|
16171
16560
|
MatOptionModule,
|
|
16172
16561
|
MatCheckboxModule,
|
|
16173
16562
|
MatRadioModule,
|
|
16563
|
+
MatSlideToggleModule,
|
|
16174
16564
|
MatDatepickerModule,
|
|
16175
16565
|
MatNativeDateModule,
|
|
16176
16566
|
MatProgressSpinnerModule,
|
|
@@ -16268,7 +16658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
16268
16658
|
TestCaseScreenshotStepComponent,
|
|
16269
16659
|
TestCaseCustomCodeStepComponent,
|
|
16270
16660
|
LiveConversationComponent,
|
|
16271
|
-
StepBuilderActionComponent
|
|
16661
|
+
StepBuilderActionComponent,
|
|
16662
|
+
StepBuilderLoopComponent,
|
|
16272
16663
|
],
|
|
16273
16664
|
imports: [
|
|
16274
16665
|
CommonModule,
|
|
@@ -16282,6 +16673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
16282
16673
|
MatOptionModule,
|
|
16283
16674
|
MatCheckboxModule,
|
|
16284
16675
|
MatRadioModule,
|
|
16676
|
+
MatSlideToggleModule,
|
|
16285
16677
|
MatDatepickerModule,
|
|
16286
16678
|
MatNativeDateModule,
|
|
16287
16679
|
MatProgressSpinnerModule,
|
|
@@ -16375,7 +16767,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
16375
16767
|
TestCaseScreenshotStepComponent,
|
|
16376
16768
|
TestCaseCustomCodeStepComponent,
|
|
16377
16769
|
LiveConversationComponent,
|
|
16378
|
-
StepBuilderActionComponent
|
|
16770
|
+
StepBuilderActionComponent,
|
|
16771
|
+
StepBuilderLoopComponent,
|
|
16379
16772
|
],
|
|
16380
16773
|
providers: [
|
|
16381
16774
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer },
|
|
@@ -16550,5 +16943,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
16550
16943
|
* Generated bundle index. Do not edit.
|
|
16551
16944
|
*/
|
|
16552
16945
|
|
|
16553
|
-
export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseScreenshotStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isScreenshotStepConfig, isStepGroupConfig, isUploadStepConfig };
|
|
16946
|
+
export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderLoopComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseScreenshotStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isScreenshotStepConfig, isStepGroupConfig, isUploadStepConfig };
|
|
16554
16947
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|