@cqa-lib/cqa-ui 1.1.168 → 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.
@@ -15765,6 +15765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
15765
15765
  class StepBuilderActionComponent {
15766
15766
  constructor(fb) {
15767
15767
  this.fb = fb;
15768
+ this.showHeader = true;
15768
15769
  /** List of action templates to display */
15769
15770
  this.templates = [];
15770
15771
  /** Placeholder text for search input */
@@ -15914,11 +15915,13 @@ class StepBuilderActionComponent {
15914
15915
  }
15915
15916
  }
15916
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 });
15917
- 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-px-3 cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\">\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\n [form]=\"variablesForm\"\n [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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
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"] }] });
15918
15919
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
15919
15920
  type: Component,
15920
- 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-px-3 cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\">\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\n [form]=\"variablesForm\"\n [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: [] }]
15921
- }], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { templates: [{
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: [{
15922
15925
  type: Input
15923
15926
  }], searchPlaceholder: [{
15924
15927
  type: Input
@@ -15947,10 +15950,10 @@ class StepBuilderLoopComponent {
15947
15950
  this.dataProfileOptions = [];
15948
15951
  /** Indicates if more data profiles are available for loading */
15949
15952
  this.hasMoreDataProfiles = false;
15950
- this.hasMoreWhileTemplates = false;
15951
- this.isLoadingWhileTemplates = false;
15952
15953
  /** Loading state for data profiles */
15953
15954
  this.isLoadingDataProfiles = false;
15955
+ /** Function to handle variable processing or custom logic. Can be passed from parent component. */
15956
+ this.setWhileTemplateVariables = () => { return []; };
15954
15957
  /** Emit when step is created */
15955
15958
  this.createStep = new EventEmitter();
15956
15959
  /** Emit when cancelled */
@@ -15961,10 +15964,10 @@ class StepBuilderLoopComponent {
15961
15964
  this.loadMoreDataProfiles = new EventEmitter();
15962
15965
  /** Emit when data profile search query changes */
15963
15966
  this.searchDataProfiles = new EventEmitter();
15964
- /** Emit when more data profiles need to be loaded */
15965
- this.loadMoreWhileTemplates = new EventEmitter();
15966
- /** Emit when data profile search query changes */
15967
- this.searchWhileTemplates = new EventEmitter();
15967
+ this.whileTemplates = [];
15968
+ this.whileSearchPlaceholder = 'Search While';
15969
+ this.whileSearchValue = '';
15970
+ this.selectedWhileTemplate = null;
15968
15971
  this.selectedLoopType = 'for';
15969
15972
  // Internal state for managing loop indices
15970
15973
  this.selectedDataProfile = null;
@@ -16026,22 +16029,13 @@ class StepBuilderLoopComponent {
16026
16029
  // Handle change if needed
16027
16030
  }
16028
16031
  };
16029
- this.whileDataProfileConfig = {
16030
- key: 'whileDataProfile',
16031
- placeholder: 'while data profile',
16032
- multiple: false,
16033
- searchable: true,
16034
- serverSearch: true,
16035
- hasMore: this.hasMoreWhileTemplates,
16036
- isLoading: this.isLoadingWhileTemplates,
16037
- options: [],
16038
- };
16039
16032
  }
16040
16033
  ngOnInit() {
16041
16034
  this.selectedLoopType = this.loopType;
16042
16035
  this.updateConfigs();
16043
16036
  }
16044
16037
  ngOnChanges(changes) {
16038
+ console.log("this.whileTemplates", this.whileTemplates);
16045
16039
  if (changes['selectOptions']) {
16046
16040
  this.updateConfigs();
16047
16041
  }
@@ -16190,7 +16184,7 @@ class StepBuilderLoopComponent {
16190
16184
  };
16191
16185
  this.loopEndConfig = {
16192
16186
  ...this.loopEndConfig,
16193
- options: [{ id: -1, value: -1, name: 'End', label: 'End' }, ...endOptions],
16187
+ options: [...endOptions, { id: -1, value: -1, name: 'End', label: 'End' }],
16194
16188
  onChange: (value) => {
16195
16189
  // Handle change if needed
16196
16190
  }
@@ -16207,6 +16201,11 @@ class StepBuilderLoopComponent {
16207
16201
  }
16208
16202
  onCreateStep() {
16209
16203
  const formValue = this.loopForm.value;
16204
+ if (this.selectedLoopType === 'while') {
16205
+ if (!this.selectedWhileTemplate) {
16206
+ return;
16207
+ }
16208
+ }
16210
16209
  const stepData = {
16211
16210
  selectedLoopType: this.selectedLoopType,
16212
16211
  loopType: this.selectedLoopType,
@@ -16214,7 +16213,18 @@ class StepBuilderLoopComponent {
16214
16213
  dataProfile: formValue.dataProfile || undefined,
16215
16214
  loopStart: formValue.loopStart || undefined,
16216
16215
  loopEnd: formValue.loopEnd || undefined,
16217
- runTime: formValue.runTime || 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
16218
16228
  };
16219
16229
  console.log('stepData', stepData);
16220
16230
  this.createStep.emit(stepData);
@@ -16231,18 +16241,6 @@ class StepBuilderLoopComponent {
16231
16241
  onLoadMoreDataProfiles(event) {
16232
16242
  this.loadMoreDataProfiles.emit(event.query);
16233
16243
  }
16234
- /**
16235
- * Handle search event for while templates
16236
- */
16237
- onSearchWhileTemplates(query) {
16238
- this.searchWhileTemplates.emit(query);
16239
- }
16240
- /**
16241
- * Handle loadMore event for while templates
16242
- */
16243
- onLoadMoreWhileTemplates(event) {
16244
- this.loadMoreWhileTemplates.emit(event.query);
16245
- }
16246
16244
  /**
16247
16245
  * Update data profile config when loading state or hasMore changes
16248
16246
  */
@@ -16268,12 +16266,29 @@ class StepBuilderLoopComponent {
16268
16266
  });
16269
16267
  this.updateLoopIndexOptions();
16270
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
+ }
16271
16286
  }
16272
16287
  StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16273
- 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", hasMoreWhileTemplates: "hasMoreWhileTemplates", isLoadingWhileTemplates: "isLoadingWhileTemplates", isLoadingDataProfiles: "isLoadingDataProfiles" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreWhileTemplates: "loadMoreWhileTemplates", searchWhileTemplates: "searchWhileTemplates" }, 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-dynamic-select\n [form]=\"loopForm\"\n [config]=\"whileDataProfileConfig\"\n (searchChange)=\"onSearchWhileTemplates($event.query)\"\n (loadMore)=\"onLoadMoreWhileTemplates($event)\">\n </cqa-dynamic-select>\n </ng-container>\n\n <!-- Action Buttons -->\n <div 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: 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"] }] });
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"] }] });
16274
16289
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
16275
16290
  type: Component,
16276
- 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-dynamic-select\n [form]=\"loopForm\"\n [config]=\"whileDataProfileConfig\"\n (searchChange)=\"onSearchWhileTemplates($event.query)\"\n (loadMore)=\"onLoadMoreWhileTemplates($event)\">\n </cqa-dynamic-select>\n </ng-container>\n\n <!-- Action Buttons -->\n <div 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: [] }]
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: [] }]
16277
16292
  }], ctorParameters: function () { return []; }, propDecorators: { loopType: [{
16278
16293
  type: Input
16279
16294
  }], selectOptions: [{
@@ -16282,12 +16297,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
16282
16297
  type: Input
16283
16298
  }], hasMoreDataProfiles: [{
16284
16299
  type: Input
16285
- }], hasMoreWhileTemplates: [{
16286
- type: Input
16287
- }], isLoadingWhileTemplates: [{
16288
- type: Input
16289
16300
  }], isLoadingDataProfiles: [{
16290
16301
  type: Input
16302
+ }], setWhileTemplateVariables: [{
16303
+ type: Input
16291
16304
  }], createStep: [{
16292
16305
  type: Output
16293
16306
  }], cancelled: [{
@@ -16298,10 +16311,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
16298
16311
  type: Output
16299
16312
  }], searchDataProfiles: [{
16300
16313
  type: Output
16301
- }], loadMoreWhileTemplates: [{
16302
- type: Output
16303
- }], searchWhileTemplates: [{
16304
- type: Output
16314
+ }], whileTemplates: [{
16315
+ type: Input
16316
+ }], whileSearchPlaceholder: [{
16317
+ type: Input
16318
+ }], whileSearchValue: [{
16319
+ type: Input
16305
16320
  }] } });
16306
16321
 
16307
16322
  class UiKitModule {