@cqa-lib/cqa-ui 1.1.365 → 1.1.367
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/badge/badge.component.mjs +5 -3
- package/esm2020/lib/dashboards/insight-card/insight-card.component.mjs +1 -1
- package/esm2020/lib/execution-screen/ai-action-step/ai-action-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/ai-agent-step/ai-agent-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/api-step/api-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/basic-step/basic-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/condition-step/condition-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/db-query-execution-item/db-query-execution-item.component.mjs +1 -1
- package/esm2020/lib/execution-screen/db-verification-step/db-verification-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/document-verification-step/document-verification-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/file-download-step/file-download-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/live-execution-step/live-execution-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/loop-step/loop-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/step-group/step-group.component.mjs +1 -1
- package/esm2020/lib/run-history-card/run-history-card.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-action/step-builder-action.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-ai-agent/step-builder-ai-agent.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-database/step-builder-database.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-document/step-builder-document.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-group/step-builder-group.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +1 -1
- package/esm2020/lib/test-case-details/api-edit-step/api-edit-step.component.mjs +1 -1
- package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/element-popup/element-popup.component.mjs +1 -1
- package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +1 -1
- package/esm2020/lib/test-case-details/test-case-details.component.mjs +1 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +32 -30
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +32 -30
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/badge/badge.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -190,7 +190,7 @@ export class RunHistoryCardComponent {
|
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
192
|
RunHistoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
193
|
-
RunHistoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunHistoryCardComponent, selector: "cqa-run-history-card", inputs: { id: "id", status: "status", type: "type", timestamp: "timestamp", duration: "duration", runLabel: "runLabel", errorMessage: "errorMessage", size: "size", durationTooltip: "durationTooltip", platform: "platform" }, outputs: { headingClicked: "headingClicked" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n padding: cardPadding,\n border: '1px solid #E4E4E4',\n 'border-left-color': statusColor,\n 'border-left-width': borderLeftWidth\n }\">\n\n <!-- Header: Run ID and Status Badge -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n 'cqa-mb-[10px]': isSmall,\n 'cqa-mb-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n <span [ngStyle]=\"statusIconContainerStyles\">\n <mat-icon [ngStyle]=\"statusIconStyles\">\n {{ statusIcon }}\n </mat-icon>\n </span>\n <span class=\"cqa-font-semibold cqa-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\n #{{ id }}\n </span>\n </div>\n\n <!-- Status Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n [ngClass]=\"{\n 'cqa-py-[2px] cqa-text-[10px]': isSmall,\n 'cqa-py-1 cqa-text-xs': !isSmall\n }\" [ngStyle]=\"statusBadgeStyles\">\n {{ statusLabel }}\n </span>\n </div>\n\n <!-- Type and Timestamp -->\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n {{ typeIcon }}\n </mat-icon>\n <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n {{ typeLabel }}\n </span>\n </div>\n\n <!-- Timestamp -->\n <div class=\"cqa-font-normal cqa-text-[#0B0B0B] cqa-leading-normal\" [ngClass]=\"{\n 'cqa-text-sm': !isSmall,\n 'cqa-text-[11px]': isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n {{ timestamp }}\n </div>\n\n <!-- Duration, Platform and Run Label -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\" [title]=\"durationTooltip\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n schedule\n </mat-icon>\n <span [ngClass]=\"{\n 'cqa-text-[8px]': isSmall,\n 'cqa-text-[10px]': !isSmall\n }\">\n {{ duration }}\n </span>\n </div>\n\n <cqa-badge \n *ngIf=\"platform\"\n [label]=\"platformLabel\"\n [icon]=\"platformIcon\"\n [iconLibrary]=\"platformIconLibrary\"\n [size]=\"isSmall ? 'extra-small' : 'small'\"\n variant=\"default\"\n [iconSize]=\"isSmall ? 10 : 12\">\n </cqa-badge>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\"\n [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n {{ runLabel }}\n </span>\n </div>\n\n <!-- Error Message (only for failed status and normal size) -->\n <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n style=\"border-top: 1px solid #E4E4E4;\">\n <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n {{ errorMessage }}\n </p>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
193
|
+
RunHistoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunHistoryCardComponent, selector: "cqa-run-history-card", inputs: { id: "id", status: "status", type: "type", timestamp: "timestamp", duration: "duration", runLabel: "runLabel", errorMessage: "errorMessage", size: "size", durationTooltip: "durationTooltip", platform: "platform" }, outputs: { headingClicked: "headingClicked" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n padding: cardPadding,\n border: '1px solid #E4E4E4',\n 'border-left-color': statusColor,\n 'border-left-width': borderLeftWidth\n }\">\n\n <!-- Header: Run ID and Status Badge -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n 'cqa-mb-[10px]': isSmall,\n 'cqa-mb-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n <span [ngStyle]=\"statusIconContainerStyles\">\n <mat-icon [ngStyle]=\"statusIconStyles\">\n {{ statusIcon }}\n </mat-icon>\n </span>\n <span class=\"cqa-font-semibold cqa-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\n #{{ id }}\n </span>\n </div>\n\n <!-- Status Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n [ngClass]=\"{\n 'cqa-py-[2px] cqa-text-[10px]': isSmall,\n 'cqa-py-1 cqa-text-xs': !isSmall\n }\" [ngStyle]=\"statusBadgeStyles\">\n {{ statusLabel }}\n </span>\n </div>\n\n <!-- Type and Timestamp -->\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n {{ typeIcon }}\n </mat-icon>\n <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n {{ typeLabel }}\n </span>\n </div>\n\n <!-- Timestamp -->\n <div class=\"cqa-font-normal cqa-text-[#0B0B0B] cqa-leading-normal\" [ngClass]=\"{\n 'cqa-text-sm': !isSmall,\n 'cqa-text-[11px]': isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n {{ timestamp }}\n </div>\n\n <!-- Duration, Platform and Run Label -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\" [title]=\"durationTooltip\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n schedule\n </mat-icon>\n <span [ngClass]=\"{\n 'cqa-text-[8px]': isSmall,\n 'cqa-text-[10px]': !isSmall\n }\">\n {{ duration }}\n </span>\n </div>\n\n <cqa-badge \n *ngIf=\"platform\"\n [label]=\"platformLabel\"\n [icon]=\"platformIcon\"\n [iconLibrary]=\"platformIconLibrary\"\n [size]=\"isSmall ? 'extra-small' : 'small'\"\n variant=\"default\"\n [iconSize]=\"isSmall ? 10 : 12\">\n </cqa-badge>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\"\n [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n {{ runLabel }}\n </span>\n </div>\n\n <!-- Error Message (only for failed status and normal size) -->\n <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n style=\"border-top: 1px solid #E4E4E4;\">\n <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n {{ errorMessage }}\n </p>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
194
194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, decorators: [{
|
|
195
195
|
type: Component,
|
|
196
196
|
args: [{ selector: 'cqa-run-history-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n padding: cardPadding,\n border: '1px solid #E4E4E4',\n 'border-left-color': statusColor,\n 'border-left-width': borderLeftWidth\n }\">\n\n <!-- Header: Run ID and Status Badge -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n 'cqa-mb-[10px]': isSmall,\n 'cqa-mb-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n <span [ngStyle]=\"statusIconContainerStyles\">\n <mat-icon [ngStyle]=\"statusIconStyles\">\n {{ statusIcon }}\n </mat-icon>\n </span>\n <span class=\"cqa-font-semibold cqa-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\n #{{ id }}\n </span>\n </div>\n\n <!-- Status Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n [ngClass]=\"{\n 'cqa-py-[2px] cqa-text-[10px]': isSmall,\n 'cqa-py-1 cqa-text-xs': !isSmall\n }\" [ngStyle]=\"statusBadgeStyles\">\n {{ statusLabel }}\n </span>\n </div>\n\n <!-- Type and Timestamp -->\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n {{ typeIcon }}\n </mat-icon>\n <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n {{ typeLabel }}\n </span>\n </div>\n\n <!-- Timestamp -->\n <div class=\"cqa-font-normal cqa-text-[#0B0B0B] cqa-leading-normal\" [ngClass]=\"{\n 'cqa-text-sm': !isSmall,\n 'cqa-text-[11px]': isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n {{ timestamp }}\n </div>\n\n <!-- Duration, Platform and Run Label -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\" [title]=\"durationTooltip\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n schedule\n </mat-icon>\n <span [ngClass]=\"{\n 'cqa-text-[8px]': isSmall,\n 'cqa-text-[10px]': !isSmall\n }\">\n {{ duration }}\n </span>\n </div>\n\n <cqa-badge \n *ngIf=\"platform\"\n [label]=\"platformLabel\"\n [icon]=\"platformIcon\"\n [iconLibrary]=\"platformIconLibrary\"\n [size]=\"isSmall ? 'extra-small' : 'small'\"\n variant=\"default\"\n [iconSize]=\"isSmall ? 10 : 12\">\n </cqa-badge>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\"\n [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n {{ runLabel }}\n </span>\n </div>\n\n <!-- Error Message (only for failed status and normal size) -->\n <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n style=\"border-top: 1px solid #E4E4E4;\">\n <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n {{ errorMessage }}\n </p>\n </div>\n </div>\n</div>", styles: [] }]
|
|
@@ -812,7 +812,7 @@ export class StepBuilderActionComponent {
|
|
|
812
812
|
}
|
|
813
813
|
}
|
|
814
814
|
StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
815
|
-
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\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; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\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 <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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 *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3.SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i4.TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
815
|
+
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\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; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\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 <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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 *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3.SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i4.TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
816
816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
|
|
817
817
|
type: Component,
|
|
818
818
|
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\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; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\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 <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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 *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
@@ -388,7 +388,7 @@ export class StepBuilderAiAgentComponent {
|
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
390
|
StepBuilderAiAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
391
|
-
StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: i2.CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: i3.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i4.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i8.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
391
|
+
StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: i2.CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: i3.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i4.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i8.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
392
392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
|
|
393
393
|
type: Component,
|
|
394
394
|
args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs
CHANGED
|
@@ -752,7 +752,7 @@ export class StepBuilderConditionComponent {
|
|
|
752
752
|
}
|
|
753
753
|
}
|
|
754
754
|
StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
755
|
-
StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, 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 Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i8.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
755
|
+
StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, 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 Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i8.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
756
756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
|
|
757
757
|
type: Component,
|
|
758
758
|
args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, 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 Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", styles: [] }]
|
package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs
CHANGED
|
@@ -274,7 +274,7 @@ export class StepBuilderCustomCodeComponent {
|
|
|
274
274
|
}
|
|
275
275
|
}
|
|
276
276
|
StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
277
|
-
StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\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 </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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 <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { type: i4.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: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i8.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i9.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
277
|
+
StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\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 </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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 <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { type: i4.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: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i8.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i9.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
278
278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
|
|
279
279
|
type: Component,
|
|
280
280
|
args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\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 </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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 <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|