@cqa-lib/cqa-ui 1.1.183 → 1.1.185
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/add-prerequisite-cases-section/add-prerequisite-cases-section.component.mjs +21 -9
- package/esm2020/lib/execution-screen/main-step-collapse/main-step-collapse.component.mjs +11 -2
- package/esm2020/lib/step-builder/step-builder-api/step-builder-api.component.mjs +510 -0
- package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +92 -7
- package/esm2020/lib/test-case-details/create-step-group/create-step-group.component.mjs +114 -0
- package/esm2020/lib/test-case-details/delete-steps/delete-steps.component.mjs +104 -0
- package/esm2020/lib/ui-kit.module.mjs +17 -2
- package/esm2020/public-api.mjs +4 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +847 -15
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +835 -14
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/add-prerequisite-cases-section/add-prerequisite-cases-section.component.d.ts +11 -3
- package/lib/execution-screen/main-step-collapse/main-step-collapse.component.d.ts +5 -3
- package/lib/step-builder/step-builder-api/step-builder-api.component.d.ts +115 -0
- package/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.d.ts +17 -3
- package/lib/test-case-details/create-step-group/create-step-group.component.d.ts +30 -0
- package/lib/test-case-details/delete-steps/delete-steps.component.d.ts +26 -0
- package/lib/ui-kit.module.d.ts +35 -32
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
- package/styles.css +1 -1
|
@@ -20,7 +20,7 @@ import * as i3$3 from '@angular/material/checkbox';
|
|
|
20
20
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
21
21
|
import * as i4 from '@angular/material/radio';
|
|
22
22
|
import { MatRadioModule } from '@angular/material/radio';
|
|
23
|
-
import * as
|
|
23
|
+
import * as i5 from '@angular/material/slide-toggle';
|
|
24
24
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
25
25
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
26
26
|
import * as i2$3 from '@angular/material/progress-spinner';
|
|
@@ -4353,6 +4353,11 @@ class AddPrerequisiteCasesSectionComponent {
|
|
|
4353
4353
|
this.expanded = false;
|
|
4354
4354
|
/** Array of row descriptors, each with a unique key */
|
|
4355
4355
|
this.rows = [];
|
|
4356
|
+
/**
|
|
4357
|
+
* Prerequisite options from API (e.g. test cases to choose from).
|
|
4358
|
+
* Passed to getSelectConfig when building the config for each row.
|
|
4359
|
+
*/
|
|
4360
|
+
this.options = [];
|
|
4356
4361
|
/** Section label (e.g. "Prerequisite Cases") */
|
|
4357
4362
|
this.label = 'Prerequisite Cases';
|
|
4358
4363
|
/** Tooltip for the info icon */
|
|
@@ -4365,6 +4370,8 @@ class AddPrerequisiteCasesSectionComponent {
|
|
|
4365
4370
|
this.cancelText = 'Cancel';
|
|
4366
4371
|
/** Text for the collapsed "Add" trigger */
|
|
4367
4372
|
this.addTriggerText = 'Add Prerequisite';
|
|
4373
|
+
/** When true, hide Add Prerequisite button even if rows are empty (e.g. when collapsing after update with existing prerequisites) */
|
|
4374
|
+
this.hideAddPrerequisite = false;
|
|
4368
4375
|
/** Validation message shown when Add Another/Update are disabled (not all rows have values) */
|
|
4369
4376
|
this.selectFirstValidationMessage = 'Please select a prerequisite for each row first, then click Add Another.';
|
|
4370
4377
|
this.expandedChange = new EventEmitter();
|
|
@@ -4392,7 +4399,8 @@ class AddPrerequisiteCasesSectionComponent {
|
|
|
4392
4399
|
this.addRow.emit();
|
|
4393
4400
|
}
|
|
4394
4401
|
onAddRow() {
|
|
4395
|
-
|
|
4402
|
+
// Allow adding first row when empty (no validation needed)
|
|
4403
|
+
if (this.rows.length > 0 && !this.allRowsHaveValues()) {
|
|
4396
4404
|
this.showAddAnotherValidation = true;
|
|
4397
4405
|
this.cdr.markForCheck();
|
|
4398
4406
|
return;
|
|
@@ -4467,21 +4475,24 @@ class AddPrerequisiteCasesSectionComponent {
|
|
|
4467
4475
|
this.prerequisitesChange.emit(selections);
|
|
4468
4476
|
}
|
|
4469
4477
|
getConfig(index) {
|
|
4470
|
-
var _a, _b;
|
|
4471
|
-
|
|
4478
|
+
var _a, _b, _c, _d;
|
|
4479
|
+
const opts = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) ? this.options : undefined;
|
|
4480
|
+
return (_c = (_b = this.getSelectConfig) === null || _b === void 0 ? void 0 : _b.call(this, index, opts)) !== null && _c !== void 0 ? _c : { key: `row_${index}`, options: (_d = this.options) !== null && _d !== void 0 ? _d : [] };
|
|
4472
4481
|
}
|
|
4473
4482
|
}
|
|
4474
4483
|
AddPrerequisiteCasesSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AddPrerequisiteCasesSectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4475
|
-
AddPrerequisiteCasesSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AddPrerequisiteCasesSectionComponent, selector: "cqa-add-prerequisite-cases-section", inputs: { expanded: "expanded", form: "form", rows: "rows", getSelectConfig: "getSelectConfig", label: "label", infoTooltip: "infoTooltip", addAnotherText: "addAnotherText", updateText: "updateText", cancelText: "cancelText", addTriggerText: "addTriggerText", selectFirstValidationMessage: "selectFirstValidationMessage" }, outputs: { expandedChange: "expandedChange", addRow: "addRow", removeRow: "removeRow", rowsReordered: "rowsReordered", update: "update", cancel: "cancel", selectionChange: "selectionChange", prerequisitesChange: "prerequisitesChange" }, host: { classAttribute: "cqa-ui-root cqa-add-prerequisite-cases-section-host" }, queries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBody"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"rows.length === 0\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D1D5DC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"onAddPrerequisiteClick()\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-text-sm cqa-font-medium\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">add</mat-icon>\n <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ addTriggerText }}</span>\n </div>\n </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D1D5DC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"toggleExpanded(true)\">\n <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"rows.length > 0 && expanded\">\n <div class=\"cqa-mt-4 cqa-p-3 cqa-bg-[#f9fafb] cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n <mat-icon class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n <button\n type=\"button\"\n class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n (click)=\"toggleExpanded(false)\"\n matTooltip=\"Close\">\n <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n </button>\n </div>\n\n <div\n class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n [dndDropzone]=\"['prerequisite-row']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n <div\n *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n [dndDraggable]=\"row\"\n [dndDisableIf]=\"rows.length <= 1\"\n dndEffectAllowed=\"move\"\n dndType=\"prerequisite-row\">\n <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n <ng-container *ngIf=\"selectBodyTpl\">\n <ng-container\n *ngTemplateOutlet=\"selectBodyTpl; context: {\n $implicit: row,\n index: i,\n form: form,\n config: getConfig(i)\n }\">\n </ng-container>\n </ng-container>\n <!-- Default: built-in cqa-dynamic-select -->\n <cqa-dynamic-select\n *ngIf=\"!selectBodyTpl && form\"\n [form]=\"form\"\n [config]=\"getConfig(i)\"\n (selectionChange)=\"onSelectionChange($event, i)\">\n </cqa-dynamic-select>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n (click)=\"onRemoveRow(i)\"\n matTooltip=\"Cancel\">\n <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n {{ selectFirstValidationMessage }}\n </div>\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n [text]=\"addAnotherText\"\n btnSize=\"md\"\n customClass=\"cqa-text-[#3b82f6] cqa-mb-3 cqa-hover:cqa-bg-[#eff6ff]\"\n (clicked)=\"onAddRow()\">\n </cqa-button>\n <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n <button\n type=\"button\"\n class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n (click)=\"onCancel()\">\n {{ cancelText }}\n </button>\n <button\n type=\"button\"\n class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db]\"\n [disabled]=\"!allRowsHaveValues()\"\n (click)=\"onUpdate()\">\n {{ updateText }}\n </button>\n </div>\n </div>\n</ng-container>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i7.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i7.DndHandleDirective, selector: "[dndHandle]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4484
|
+
AddPrerequisiteCasesSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AddPrerequisiteCasesSectionComponent, selector: "cqa-add-prerequisite-cases-section", inputs: { expanded: "expanded", form: "form", rows: "rows", options: "options", getSelectConfig: "getSelectConfig", label: "label", infoTooltip: "infoTooltip", addAnotherText: "addAnotherText", updateText: "updateText", cancelText: "cancelText", addTriggerText: "addTriggerText", hideAddPrerequisite: "hideAddPrerequisite", selectFirstValidationMessage: "selectFirstValidationMessage" }, outputs: { expandedChange: "expandedChange", addRow: "addRow", removeRow: "removeRow", rowsReordered: "rowsReordered", update: "update", cancel: "cancel", selectionChange: "selectionChange", prerequisitesChange: "prerequisitesChange" }, host: { classAttribute: "cqa-ui-root cqa-add-prerequisite-cases-section-host" }, queries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBody"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"onAddPrerequisiteClick()\">\n <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"toggleExpanded(true)\">\n <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n <div class=\"cqa-mt-4 cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n <mat-icon class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n <button\n type=\"button\"\n class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n (click)=\"toggleExpanded(false)\"\n matTooltip=\"Close\">\n <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n </button>\n </div>\n\n <div\n class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n [dndDropzone]=\"['prerequisite-row']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n <div\n *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n [dndDraggable]=\"row\"\n [dndDisableIf]=\"rows.length <= 1\"\n dndEffectAllowed=\"move\"\n dndType=\"prerequisite-row\">\n <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n <ng-container *ngIf=\"selectBodyTpl\">\n <ng-container\n *ngTemplateOutlet=\"selectBodyTpl; context: {\n $implicit: row,\n index: i,\n form: form,\n config: getConfig(i)\n }\">\n </ng-container>\n </ng-container>\n <!-- Default: built-in cqa-dynamic-select -->\n <cqa-dynamic-select\n *ngIf=\"!selectBodyTpl && form\"\n [form]=\"form\"\n [config]=\"getConfig(i)\"\n (selectionChange)=\"onSelectionChange($event, i)\">\n </cqa-dynamic-select>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n (click)=\"onRemoveRow(i)\"\n matTooltip=\"Cancel\">\n <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n {{ selectFirstValidationMessage }}\n </div>\n <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n <div\n *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"onAddRow()\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n </div>\n <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n <button\n type=\"button\"\n class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n (click)=\"onCancel()\">\n {{ cancelText }}\n </button>\n <button\n type=\"button\"\n class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db]\"\n [disabled]=\"!allRowsHaveValues()\"\n (click)=\"onUpdate()\">\n {{ updateText }}\n </button>\n </div>\n </div>\n</ng-container>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i7.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i7.DndHandleDirective, selector: "[dndHandle]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4476
4485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AddPrerequisiteCasesSectionComponent, decorators: [{
|
|
4477
4486
|
type: Component,
|
|
4478
|
-
args: [{ selector: 'cqa-add-prerequisite-cases-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root cqa-add-prerequisite-cases-section-host' }, template: "<ng-container *ngIf=\"rows.length === 0\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#
|
|
4487
|
+
args: [{ selector: 'cqa-add-prerequisite-cases-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root cqa-add-prerequisite-cases-section-host' }, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"onAddPrerequisiteClick()\">\n <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n <div\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"toggleExpanded(true)\">\n <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n <div class=\"cqa-mt-4 cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n <mat-icon class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n <button\n type=\"button\"\n class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n (click)=\"toggleExpanded(false)\"\n matTooltip=\"Close\">\n <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n </button>\n </div>\n\n <div\n class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n [dndDropzone]=\"['prerequisite-row']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n <div\n *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n [dndDraggable]=\"row\"\n [dndDisableIf]=\"rows.length <= 1\"\n dndEffectAllowed=\"move\"\n dndType=\"prerequisite-row\">\n <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n <ng-container *ngIf=\"selectBodyTpl\">\n <ng-container\n *ngTemplateOutlet=\"selectBodyTpl; context: {\n $implicit: row,\n index: i,\n form: form,\n config: getConfig(i)\n }\">\n </ng-container>\n </ng-container>\n <!-- Default: built-in cqa-dynamic-select -->\n <cqa-dynamic-select\n *ngIf=\"!selectBodyTpl && form\"\n [form]=\"form\"\n [config]=\"getConfig(i)\"\n (selectionChange)=\"onSelectionChange($event, i)\">\n </cqa-dynamic-select>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n (click)=\"onRemoveRow(i)\"\n matTooltip=\"Cancel\">\n <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n {{ selectFirstValidationMessage }}\n </div>\n <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n <div\n *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n (click)=\"onAddRow()\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n </div>\n <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n <button\n type=\"button\"\n class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n (click)=\"onCancel()\">\n {{ cancelText }}\n </button>\n <button\n type=\"button\"\n class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db]\"\n [disabled]=\"!allRowsHaveValues()\"\n (click)=\"onUpdate()\">\n {{ updateText }}\n </button>\n </div>\n </div>\n</ng-container>\n", styles: [] }]
|
|
4479
4488
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { expanded: [{
|
|
4480
4489
|
type: Input
|
|
4481
4490
|
}], form: [{
|
|
4482
4491
|
type: Input
|
|
4483
4492
|
}], rows: [{
|
|
4484
4493
|
type: Input
|
|
4494
|
+
}], options: [{
|
|
4495
|
+
type: Input
|
|
4485
4496
|
}], getSelectConfig: [{
|
|
4486
4497
|
type: Input
|
|
4487
4498
|
}], label: [{
|
|
@@ -4496,6 +4507,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4496
4507
|
type: Input
|
|
4497
4508
|
}], addTriggerText: [{
|
|
4498
4509
|
type: Input
|
|
4510
|
+
}], hideAddPrerequisite: [{
|
|
4511
|
+
type: Input
|
|
4499
4512
|
}], selectFirstValidationMessage: [{
|
|
4500
4513
|
type: Input
|
|
4501
4514
|
}], selectBodyTpl: [{
|
|
@@ -11260,14 +11273,21 @@ class MainStepCollapseComponent {
|
|
|
11260
11273
|
this.viewStepsOpenInNewTab = true;
|
|
11261
11274
|
this.viewSteps = new EventEmitter();
|
|
11262
11275
|
this.headerButtonClick = new EventEmitter();
|
|
11276
|
+
this.expandedChange = new EventEmitter();
|
|
11263
11277
|
this.isExpanded = true;
|
|
11264
11278
|
this.expandedItemId = null; // Track which item's steps are currently displayed
|
|
11265
11279
|
}
|
|
11266
11280
|
ngOnInit() {
|
|
11267
11281
|
this.isExpanded = this.expanded;
|
|
11268
11282
|
}
|
|
11283
|
+
ngOnChanges(changes) {
|
|
11284
|
+
if (changes['expanded']) {
|
|
11285
|
+
this.isExpanded = this.expanded;
|
|
11286
|
+
}
|
|
11287
|
+
}
|
|
11269
11288
|
toggle() {
|
|
11270
11289
|
this.isExpanded = !this.isExpanded;
|
|
11290
|
+
this.expandedChange.emit(this.isExpanded);
|
|
11271
11291
|
}
|
|
11272
11292
|
formatDuration(seconds) {
|
|
11273
11293
|
if (seconds < 1) {
|
|
@@ -11345,7 +11365,7 @@ class MainStepCollapseComponent {
|
|
|
11345
11365
|
}
|
|
11346
11366
|
}
|
|
11347
11367
|
MainStepCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11348
|
-
MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab" }, outputs: { viewSteps: "viewSteps", headerButtonClick: "headerButtonClick" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Header -->\n<div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n (click)=\"toggle()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <!-- Chevron Icon (Left) -->\n <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> -->\n <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- Chain-Link Icon (if configured, otherwise default) -->\n <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div *ngIf=\"icon && icon.type === 'loop'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div> -->\n <!-- Bar Icon (Bulleted List) -->\n <div *ngIf=\"icon && icon.type === 'bar'\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- First bullet and line -->\n <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Second bullet and line -->\n <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Third bullet and line -->\n <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Custom Icon -->\n <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n <!-- Title -->\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ title }}\n </span>\n\n <!-- Badge and dynamic header buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n <cqa-button\n [text]=\"btn.text\"\n [icon]=\"btn.icon\"\n [variant]=\"btn.variant || 'outlined'\"\n [disabled]=\"btn.disabled\"\n [tooltip]=\"btn.tooltip\"\n [customClass]=\"btn.customClass\"\n [btnSize]=\"btn.btnSize || 'sm'\"\n (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n </cqa-button>\n </ng-container>\n <span\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n {{ getDisplayCount() }}\n </span>\n </div>\n </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <!-- When there are no items, display ng-content directly -->\n <ng-container *ngIf=\"!items || items.length === 0\">\n <ng-content></ng-content>\n </ng-container>\n\n <!-- When items exist, display them -->\n <div *ngFor=\"let item of items\">\n\n <!-- Item Header -->\n <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <!-- Left side: Status and Title -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <!-- Status Icon (Filled Green Circle with Checkmark) -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_48_121)\">\n <path\n d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_48_121\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <!-- Failed -->\n <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <!-- Pending -->\n <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <!-- Running -->\n <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n \n <!-- Title -->\n <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ item.title }}\n </span>\n </div>\n \n <!-- Right side: Duration and View Steps Link -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Duration with Clock Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n \n <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n [href]=\"getItemViewStepsUrl(item)\"\n [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>View steps</span>\n <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Steps Content (shown when item is expanded) -->\n <div *ngIf=\"isItemExpanded(item.id)\">\n <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n <div class=\"cqa-p-3\">\n <ng-container\n *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Custom content projection via ng-content - displayed for all expanded items -->\n <ng-content select=\"[itemContent]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
11368
|
+
MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab" }, outputs: { viewSteps: "viewSteps", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n (click)=\"toggle()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <!-- Chevron Icon (Left) -->\n <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> -->\n <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- Chain-Link Icon (if configured, otherwise default) -->\n <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div *ngIf=\"icon && icon.type === 'loop'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div> -->\n <!-- Bar Icon (Bulleted List) -->\n <div *ngIf=\"icon && icon.type === 'bar'\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- First bullet and line -->\n <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Second bullet and line -->\n <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Third bullet and line -->\n <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Custom Icon -->\n <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n <!-- Title -->\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ title }}\n </span>\n\n <!-- Badge and dynamic header buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n <cqa-button\n [text]=\"btn.text\"\n [icon]=\"btn.icon\"\n [variant]=\"btn.variant || 'outlined'\"\n [disabled]=\"btn.disabled\"\n [tooltip]=\"btn.tooltip\"\n [customClass]=\"btn.customClass\"\n [btnSize]=\"btn.btnSize || 'sm'\"\n (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n </cqa-button>\n </ng-container>\n <span\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n {{ getDisplayCount() }}\n </span>\n </div>\n </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <!-- When there are no items, display ng-content directly -->\n <ng-container *ngIf=\"!items || items.length === 0\">\n <ng-content></ng-content>\n </ng-container>\n\n <!-- When items exist, display them -->\n <div *ngFor=\"let item of items\">\n\n <!-- Item Header -->\n <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <!-- Left side: Status and Title -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <!-- Status Icon (Filled Green Circle with Checkmark) -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_48_121)\">\n <path\n d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_48_121\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <!-- Failed -->\n <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <!-- Pending -->\n <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <!-- Running -->\n <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n \n <!-- Title -->\n <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ item.title }}\n </span>\n </div>\n \n <!-- Right side: Duration and View Steps Link -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Duration with Clock Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n \n <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n [href]=\"getItemViewStepsUrl(item)\"\n [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>View steps</span>\n <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Steps Content (shown when item is expanded) -->\n <div *ngIf=\"isItemExpanded(item.id)\">\n <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n <div class=\"cqa-p-3\">\n <ng-container\n *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Custom content projection via ng-content - displayed for all expanded items -->\n <ng-content select=\"[itemContent]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
11349
11369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, decorators: [{
|
|
11350
11370
|
type: Component,
|
|
11351
11371
|
args: [{ selector: 'cqa-main-step-collapse', host: { class: 'cqa-ui-root' }, template: "<!-- Header -->\n<div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n (click)=\"toggle()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <!-- Chevron Icon (Left) -->\n <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> -->\n <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- Chain-Link Icon (if configured, otherwise default) -->\n <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div *ngIf=\"icon && icon.type === 'loop'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div> -->\n <!-- Bar Icon (Bulleted List) -->\n <div *ngIf=\"icon && icon.type === 'bar'\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- First bullet and line -->\n <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Second bullet and line -->\n <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Third bullet and line -->\n <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Custom Icon -->\n <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n <!-- Title -->\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ title }}\n </span>\n\n <!-- Badge and dynamic header buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n <cqa-button\n [text]=\"btn.text\"\n [icon]=\"btn.icon\"\n [variant]=\"btn.variant || 'outlined'\"\n [disabled]=\"btn.disabled\"\n [tooltip]=\"btn.tooltip\"\n [customClass]=\"btn.customClass\"\n [btnSize]=\"btn.btnSize || 'sm'\"\n (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n </cqa-button>\n </ng-container>\n <span\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n {{ getDisplayCount() }}\n </span>\n </div>\n </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <!-- When there are no items, display ng-content directly -->\n <ng-container *ngIf=\"!items || items.length === 0\">\n <ng-content></ng-content>\n </ng-container>\n\n <!-- When items exist, display them -->\n <div *ngFor=\"let item of items\">\n\n <!-- Item Header -->\n <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <!-- Left side: Status and Title -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <!-- Status Icon (Filled Green Circle with Checkmark) -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_48_121)\">\n <path\n d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_48_121\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <!-- Failed -->\n <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <!-- Pending -->\n <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <!-- Running -->\n <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n \n <!-- Title -->\n <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ item.title }}\n </span>\n </div>\n \n <!-- Right side: Duration and View Steps Link -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Duration with Clock Icon -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n \n <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n [href]=\"getItemViewStepsUrl(item)\"\n [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>View steps</span>\n <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Steps Content (shown when item is expanded) -->\n <div *ngIf=\"isItemExpanded(item.id)\">\n <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n <div class=\"cqa-p-3\">\n <ng-container\n *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Custom content projection via ng-content - displayed for all expanded items -->\n <ng-content select=\"[itemContent]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", styles: [] }]
|
|
@@ -11376,6 +11396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
11376
11396
|
type: Output
|
|
11377
11397
|
}], headerButtonClick: [{
|
|
11378
11398
|
type: Output
|
|
11399
|
+
}], expandedChange: [{
|
|
11400
|
+
type: Output
|
|
11379
11401
|
}] } });
|
|
11380
11402
|
|
|
11381
11403
|
class SimulatorComponent {
|
|
@@ -19337,6 +19359,217 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19337
19359
|
type: Output
|
|
19338
19360
|
}] } });
|
|
19339
19361
|
|
|
19362
|
+
/**
|
|
19363
|
+
* Create Step Group panel/modal for Test Case Details.
|
|
19364
|
+
* Follows the same structure and validation pattern as Test Data Modal and Loop Step.
|
|
19365
|
+
* Displays selected steps and allows naming the new group; emits createGroup with group name
|
|
19366
|
+
* so the host can create the step group and replace selected steps with it.
|
|
19367
|
+
*/
|
|
19368
|
+
class CreateStepGroupComponent {
|
|
19369
|
+
constructor(fb) {
|
|
19370
|
+
this.fb = fb;
|
|
19371
|
+
this.stepsToGroup = [];
|
|
19372
|
+
this.createGroup = new EventEmitter();
|
|
19373
|
+
this.cancelled = new EventEmitter();
|
|
19374
|
+
this.form = this.fb.group({
|
|
19375
|
+
groupName: ['', [Validators.required, Validators.minLength(1)]],
|
|
19376
|
+
});
|
|
19377
|
+
}
|
|
19378
|
+
get stepsCount() {
|
|
19379
|
+
var _a, _b;
|
|
19380
|
+
return (_b = (_a = this.stepsToGroup) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
19381
|
+
}
|
|
19382
|
+
get subtitleText() {
|
|
19383
|
+
const n = this.stepsCount;
|
|
19384
|
+
return n === 1
|
|
19385
|
+
? 'Group 1 selected step into a container'
|
|
19386
|
+
: `Group ${n} selected steps into a container`;
|
|
19387
|
+
}
|
|
19388
|
+
/** Display label for a step in the "Steps to group" list (same pattern as normal-step display). */
|
|
19389
|
+
getStepDisplayLabel(step, index) {
|
|
19390
|
+
if (isNormalStepConfig(step)) {
|
|
19391
|
+
return this.getNormalStepLabel(step);
|
|
19392
|
+
}
|
|
19393
|
+
if ('groupName' in step && step.groupName) {
|
|
19394
|
+
return step.groupName;
|
|
19395
|
+
}
|
|
19396
|
+
if ('condition' in step && step.condition) {
|
|
19397
|
+
return step.condition;
|
|
19398
|
+
}
|
|
19399
|
+
if ('loopType' in step) {
|
|
19400
|
+
const loop = step;
|
|
19401
|
+
if (loop.loopType === 'for' && loop.testDataProfile) {
|
|
19402
|
+
return `For loop: ${loop.testDataProfile}`;
|
|
19403
|
+
}
|
|
19404
|
+
if (loop.loopType === 'while' && loop.condition) {
|
|
19405
|
+
return `While: ${loop.condition}`;
|
|
19406
|
+
}
|
|
19407
|
+
}
|
|
19408
|
+
if (step.description) {
|
|
19409
|
+
return step.description;
|
|
19410
|
+
}
|
|
19411
|
+
return `Step ${index + 1}`;
|
|
19412
|
+
}
|
|
19413
|
+
getNormalStepLabel(step) {
|
|
19414
|
+
var _a, _b, _c;
|
|
19415
|
+
const params = (_a = step.parameters) !== null && _a !== void 0 ? _a : [];
|
|
19416
|
+
const getParam = (name) => params.find((p) => { var _a; return ((_a = p.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === name.toLowerCase(); });
|
|
19417
|
+
const val = (p) => { var _a, _b; return (_b = (_a = p === null || p === void 0 ? void 0 : p.displayValue) !== null && _a !== void 0 ? _a : p === null || p === void 0 ? void 0 : p.value) !== null && _b !== void 0 ? _b : ''; };
|
|
19418
|
+
switch (step.eventType) {
|
|
19419
|
+
case 'navigate': {
|
|
19420
|
+
const url = getParam('url');
|
|
19421
|
+
return url ? `Navigate to ${val(url)}` : 'Navigate';
|
|
19422
|
+
}
|
|
19423
|
+
case 'ai-agent': {
|
|
19424
|
+
const instructions = (_b = getParam('instructions')) !== null && _b !== void 0 ? _b : getParam('description');
|
|
19425
|
+
return val(instructions) || 'AI Agent step';
|
|
19426
|
+
}
|
|
19427
|
+
case 'type':
|
|
19428
|
+
return val(getParam('text')) || 'Type';
|
|
19429
|
+
case 'click':
|
|
19430
|
+
return val(getParam('selector')) ? `Click ${val(getParam('selector'))}` : 'Click';
|
|
19431
|
+
case 'verify':
|
|
19432
|
+
return val(getParam('description')) || 'Verify';
|
|
19433
|
+
case 'custom': {
|
|
19434
|
+
const desc = (_c = getParam('description')) !== null && _c !== void 0 ? _c : getParam('action');
|
|
19435
|
+
return val(desc) || 'Custom step';
|
|
19436
|
+
}
|
|
19437
|
+
default:
|
|
19438
|
+
return val(getParam('description')) || val(params[0]) || 'Step';
|
|
19439
|
+
}
|
|
19440
|
+
}
|
|
19441
|
+
onCancel() {
|
|
19442
|
+
this.cancelled.emit();
|
|
19443
|
+
}
|
|
19444
|
+
onCreateGroup() {
|
|
19445
|
+
var _a, _b, _c;
|
|
19446
|
+
if (this.form.invalid || this.stepsCount === 0) {
|
|
19447
|
+
this.form.markAllAsTouched();
|
|
19448
|
+
return;
|
|
19449
|
+
}
|
|
19450
|
+
const groupName = ((_b = (_a = this.form.get('groupName')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '').trim();
|
|
19451
|
+
if (!groupName) {
|
|
19452
|
+
(_c = this.form.get('groupName')) === null || _c === void 0 ? void 0 : _c.setErrors({ required: true });
|
|
19453
|
+
return;
|
|
19454
|
+
}
|
|
19455
|
+
this.createGroup.emit({ groupName });
|
|
19456
|
+
}
|
|
19457
|
+
}
|
|
19458
|
+
CreateStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
19459
|
+
CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup" }, outputs: { createGroup: "createGroup", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create group\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateGroup()\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, decorators: [{
|
|
19461
|
+
type: Component,
|
|
19462
|
+
args: [{ selector: 'cqa-create-step-group', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create group\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateGroup()\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
|
|
19463
|
+
}], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { stepsToGroup: [{
|
|
19464
|
+
type: Input
|
|
19465
|
+
}], createGroup: [{
|
|
19466
|
+
type: Output
|
|
19467
|
+
}], cancelled: [{
|
|
19468
|
+
type: Output
|
|
19469
|
+
}] } });
|
|
19470
|
+
|
|
19471
|
+
/**
|
|
19472
|
+
* Delete Steps confirmation modal for Test Case Details.
|
|
19473
|
+
* Matches the design of Create Step Group: shows selected steps with context (e.g. "IF lane"),
|
|
19474
|
+
* warning text, and Cancel / Delete actions. Steps are shown with red/danger styling.
|
|
19475
|
+
*/
|
|
19476
|
+
class DeleteStepsComponent {
|
|
19477
|
+
constructor() {
|
|
19478
|
+
/** Steps that will be deleted (shown in the list). */
|
|
19479
|
+
this.stepsToDelete = [];
|
|
19480
|
+
/** Context label for the sub-heading, e.g. "IF lane", "ELSE", "For loop". */
|
|
19481
|
+
this.contextLabel = '';
|
|
19482
|
+
this.confirmDelete = new EventEmitter();
|
|
19483
|
+
this.cancelled = new EventEmitter();
|
|
19484
|
+
}
|
|
19485
|
+
get stepsCount() {
|
|
19486
|
+
var _a, _b;
|
|
19487
|
+
return (_b = (_a = this.stepsToDelete) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
19488
|
+
}
|
|
19489
|
+
get titleText() {
|
|
19490
|
+
const n = this.stepsCount;
|
|
19491
|
+
return n === 1 ? 'Delete 1 step?' : `Delete ${n} steps?`;
|
|
19492
|
+
}
|
|
19493
|
+
get selectedStepsSubtitle() {
|
|
19494
|
+
var _a;
|
|
19495
|
+
const ctx = ((_a = this.contextLabel) === null || _a === void 0 ? void 0 : _a.trim()) || 'selected';
|
|
19496
|
+
return `Selected steps for ${ctx} (${this.stepsCount})`;
|
|
19497
|
+
}
|
|
19498
|
+
/** Display label for a step in the list (same pattern as create-step-group). */
|
|
19499
|
+
getStepDisplayLabel(step, index) {
|
|
19500
|
+
if (isNormalStepConfig(step)) {
|
|
19501
|
+
return this.getNormalStepLabel(step);
|
|
19502
|
+
}
|
|
19503
|
+
if ('groupName' in step && step.groupName) {
|
|
19504
|
+
return step.groupName;
|
|
19505
|
+
}
|
|
19506
|
+
if ('condition' in step && step.condition) {
|
|
19507
|
+
return step.condition;
|
|
19508
|
+
}
|
|
19509
|
+
if ('loopType' in step) {
|
|
19510
|
+
const loop = step;
|
|
19511
|
+
if (loop.loopType === 'for' && loop.testDataProfile) {
|
|
19512
|
+
return `For loop: ${loop.testDataProfile}`;
|
|
19513
|
+
}
|
|
19514
|
+
if (loop.loopType === 'while' && loop.condition) {
|
|
19515
|
+
return `While: ${loop.condition}`;
|
|
19516
|
+
}
|
|
19517
|
+
}
|
|
19518
|
+
if (step.description) {
|
|
19519
|
+
return step.description;
|
|
19520
|
+
}
|
|
19521
|
+
return `Step ${index + 1}`;
|
|
19522
|
+
}
|
|
19523
|
+
getNormalStepLabel(step) {
|
|
19524
|
+
var _a, _b, _c;
|
|
19525
|
+
const params = (_a = step.parameters) !== null && _a !== void 0 ? _a : [];
|
|
19526
|
+
const getParam = (name) => params.find((p) => { var _a; return ((_a = p.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === name.toLowerCase(); });
|
|
19527
|
+
const val = (p) => { var _a, _b; return (_b = (_a = p === null || p === void 0 ? void 0 : p.displayValue) !== null && _a !== void 0 ? _a : p === null || p === void 0 ? void 0 : p.value) !== null && _b !== void 0 ? _b : ''; };
|
|
19528
|
+
switch (step.eventType) {
|
|
19529
|
+
case 'navigate': {
|
|
19530
|
+
const url = getParam('url');
|
|
19531
|
+
return url ? `Navigate to ${val(url)}` : 'Navigate to';
|
|
19532
|
+
}
|
|
19533
|
+
case 'ai-agent': {
|
|
19534
|
+
const instructions = (_b = getParam('instructions')) !== null && _b !== void 0 ? _b : getParam('description');
|
|
19535
|
+
return val(instructions) || 'AI Agent step';
|
|
19536
|
+
}
|
|
19537
|
+
case 'type':
|
|
19538
|
+
return val(getParam('text')) || 'Type';
|
|
19539
|
+
case 'click':
|
|
19540
|
+
return val(getParam('selector')) ? `Click ${val(getParam('selector'))}` : 'Click';
|
|
19541
|
+
case 'verify':
|
|
19542
|
+
return val(getParam('description')) || 'Verify';
|
|
19543
|
+
case 'custom': {
|
|
19544
|
+
const desc = (_c = getParam('description')) !== null && _c !== void 0 ? _c : getParam('action');
|
|
19545
|
+
return val(desc) || 'Custom step';
|
|
19546
|
+
}
|
|
19547
|
+
default:
|
|
19548
|
+
return val(getParam('description')) || val(params[0]) || 'Step';
|
|
19549
|
+
}
|
|
19550
|
+
}
|
|
19551
|
+
onCancel() {
|
|
19552
|
+
this.cancelled.emit();
|
|
19553
|
+
}
|
|
19554
|
+
onDelete() {
|
|
19555
|
+
this.confirmDelete.emit();
|
|
19556
|
+
}
|
|
19557
|
+
}
|
|
19558
|
+
DeleteStepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DeleteStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19559
|
+
DeleteStepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DeleteStepsComponent, selector: "cqa-delete-steps", inputs: { stepsToDelete: "stepsToDelete", contextLabel: "contextLabel" }, outputs: { confirmDelete: "confirmDelete", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n {{ titleText }}\n </h2>\n <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n This action cannot be undone, but you can use the undo function in the toolbar.\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Selected steps for [context] (N) \u2013 scroll when many steps, scrollbar hidden (same as create-step-group) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n {{ selectedStepsSubtitle }}\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-min-h-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToDelete; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8px] cqa-rounded-[4px] cqa-pt-[4px] cqa-pb-[4px] cqa-pl-[8px] cqa-pr-[8px] cqa-bg-[rgba(238,63,63,0.1)]\">\n <!-- Numbered badge (red) -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#C63535] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#DC2626] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div> \n\n <!-- Actions: Cancel | Delete (right-aligned) -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Delete\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#EE3F3F] cqa-text-white'\"\n (clicked)=\"onDelete()\">\n </cqa-button>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DeleteStepsComponent, decorators: [{
|
|
19561
|
+
type: Component,
|
|
19562
|
+
args: [{ selector: 'cqa-delete-steps', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n {{ titleText }}\n </h2>\n <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n This action cannot be undone, but you can use the undo function in the toolbar.\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Selected steps for [context] (N) \u2013 scroll when many steps, scrollbar hidden (same as create-step-group) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n {{ selectedStepsSubtitle }}\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-min-h-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToDelete; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8px] cqa-rounded-[4px] cqa-pt-[4px] cqa-pb-[4px] cqa-pl-[8px] cqa-pr-[8px] cqa-bg-[rgba(238,63,63,0.1)]\">\n <!-- Numbered badge (red) -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#C63535] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#DC2626] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n {{ getStepDisplayLabel(step, i) }}\n </span>\n </div>\n </div>\n </div> \n\n <!-- Actions: Cancel | Delete (right-aligned) -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Delete\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#EE3F3F] cqa-text-white'\"\n (clicked)=\"onDelete()\">\n </cqa-button>\n </div>\n</div>\n" }]
|
|
19563
|
+
}], propDecorators: { stepsToDelete: [{
|
|
19564
|
+
type: Input
|
|
19565
|
+
}], contextLabel: [{
|
|
19566
|
+
type: Input
|
|
19567
|
+
}], confirmDelete: [{
|
|
19568
|
+
type: Output
|
|
19569
|
+
}], cancelled: [{
|
|
19570
|
+
type: Output
|
|
19571
|
+
}] } });
|
|
19572
|
+
|
|
19340
19573
|
class LiveConversationComponent {
|
|
19341
19574
|
constructor() {
|
|
19342
19575
|
this.conversation = null;
|
|
@@ -19691,7 +19924,7 @@ class StepBuilderActionComponent {
|
|
|
19691
19924
|
}
|
|
19692
19925
|
}
|
|
19693
19926
|
StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
19694
|
-
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n <!-- Header -->\n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- 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\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type:
|
|
19927
|
+
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n <!-- Header -->\n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- 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\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19695
19928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
|
|
19696
19929
|
type: Component,
|
|
19697
19930
|
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n <!-- Header -->\n <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n Create an action step\n </h2>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates\"\n class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n <!-- Elements -->\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- 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\n\n\n\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Elements\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- Test Data -->\n <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div> -->\n\n <!-- </div>\n <div class=\"cqa-flex cqa-gap-6\"> -->\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadata = $event\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"description = $event\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <!-- Advanced fields can be added here -->\n </div>\n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n </div>\n</div>", styles: [] }]
|
|
@@ -20386,7 +20619,7 @@ class StepBuilderConditionComponent {
|
|
|
20386
20619
|
}
|
|
20387
20620
|
}
|
|
20388
20621
|
StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
20389
|
-
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" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-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 <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n Condition Builder\n </h3>\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\">\n <div\n *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\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 {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\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)\">\n <!-- Template Grammar Display -->\n <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div> -->\n\n \n <!-- Description and Metadata Inputs -->\n <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter description'\"\n [value]=\"getConditionFormGroup(i).get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter metadata'\"\n [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4\" style=\"flex-wrap: wrap;\">\n <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n (change)=\"onConditionVariableBooleanChange(i, 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 <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n [config]=\"getSelectConfigForVariable(i, variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"variable.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\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 class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
20622
|
+
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" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-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 <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n Condition Builder\n </h3>\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\">\n <div\n *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\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 {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\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)\">\n <!-- Template Grammar Display -->\n <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div> -->\n\n \n <!-- Description and Metadata Inputs -->\n <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter description'\"\n [value]=\"getConditionFormGroup(i).get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter metadata'\"\n [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4\" style=\"flex-wrap: wrap;\">\n <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n (change)=\"onConditionVariableBooleanChange(i, 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 <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n [config]=\"getSelectConfigForVariable(i, variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"variable.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\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 class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
20390
20623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
|
|
20391
20624
|
type: Component,
|
|
20392
20625
|
args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create 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 <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n Condition Builder\n </h3>\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\">\n <div\n *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\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 {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\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)\">\n <!-- Template Grammar Display -->\n <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div> -->\n\n \n <!-- Description and Metadata Inputs -->\n <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter description'\"\n [value]=\"getConditionFormGroup(i).get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Metadata -->\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter metadata'\"\n [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4\" style=\"flex-wrap: wrap;\">\n <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n (change)=\"onConditionVariableBooleanChange(i, 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 <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n [config]=\"getSelectConfigForVariable(i, variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"variable.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\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 class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>", styles: [] }]
|
|
@@ -20728,19 +20961,99 @@ class StepBuilderCustomCodeComponent {
|
|
|
20728
20961
|
this.fb = fb;
|
|
20729
20962
|
/** Options for language dropdown */
|
|
20730
20963
|
this.languageOptions = [];
|
|
20964
|
+
/** Template to get variables from */
|
|
20965
|
+
this.template = null;
|
|
20966
|
+
/** Function to handle variable processing or custom logic. Can be passed from parent component. */
|
|
20967
|
+
this.setTemplateVariables = () => { return []; };
|
|
20731
20968
|
/** Emit when step is created */
|
|
20732
20969
|
this.createStep = new EventEmitter();
|
|
20733
20970
|
/** Emit when cancelled */
|
|
20734
20971
|
this.cancelled = new EventEmitter();
|
|
20972
|
+
this.templateVariables = [];
|
|
20735
20973
|
this.customCodeForm = this.fb.group({
|
|
20736
20974
|
language: ['', Validators.required],
|
|
20737
20975
|
code: ['', Validators.required],
|
|
20738
20976
|
metadata: [''],
|
|
20739
20977
|
description: ['']
|
|
20740
20978
|
});
|
|
20979
|
+
this.variablesForm = this.fb.group({});
|
|
20741
20980
|
}
|
|
20742
20981
|
ngOnInit() {
|
|
20743
|
-
//
|
|
20982
|
+
// Initialize template variables if template is provided
|
|
20983
|
+
if (this.template) {
|
|
20984
|
+
this.loadTemplateVariables();
|
|
20985
|
+
}
|
|
20986
|
+
}
|
|
20987
|
+
ngOnChanges(changes) {
|
|
20988
|
+
if (changes['template'] && this.template) {
|
|
20989
|
+
this.loadTemplateVariables();
|
|
20990
|
+
}
|
|
20991
|
+
}
|
|
20992
|
+
loadTemplateVariables() {
|
|
20993
|
+
if (this.template && this.setTemplateVariables) {
|
|
20994
|
+
this.templateVariables = this.setTemplateVariables(this.template);
|
|
20995
|
+
this.buildVariablesForm();
|
|
20996
|
+
}
|
|
20997
|
+
}
|
|
20998
|
+
buildVariablesForm() {
|
|
20999
|
+
// Clear existing form controls
|
|
21000
|
+
Object.keys(this.variablesForm.controls).forEach(key => {
|
|
21001
|
+
this.variablesForm.removeControl(key);
|
|
21002
|
+
});
|
|
21003
|
+
// Add form controls for each variable
|
|
21004
|
+
this.templateVariables.forEach(variable => {
|
|
21005
|
+
// Handle boolean variables - use boolean value, others use string
|
|
21006
|
+
const defaultValue = variable.type === 'boolean'
|
|
21007
|
+
? (variable.value === true || variable.value === 'true' || variable.value === 1)
|
|
21008
|
+
: (variable.value || '');
|
|
21009
|
+
this.variablesForm.addControl(variable.name, new FormControl(defaultValue));
|
|
21010
|
+
});
|
|
21011
|
+
}
|
|
21012
|
+
getSelectConfig(variable) {
|
|
21013
|
+
const options = (variable.options || []).map((opt) => ({
|
|
21014
|
+
id: opt,
|
|
21015
|
+
value: opt,
|
|
21016
|
+
name: opt,
|
|
21017
|
+
label: opt
|
|
21018
|
+
}));
|
|
21019
|
+
return {
|
|
21020
|
+
key: variable.name,
|
|
21021
|
+
placeholder: `Select ${variable.label}`,
|
|
21022
|
+
multiple: false,
|
|
21023
|
+
searchable: false,
|
|
21024
|
+
options: options,
|
|
21025
|
+
onChange: (value) => {
|
|
21026
|
+
this.onVariableValueChange(variable.name, value);
|
|
21027
|
+
}
|
|
21028
|
+
};
|
|
21029
|
+
}
|
|
21030
|
+
onVariableValueChange(variableName, value) {
|
|
21031
|
+
var _a;
|
|
21032
|
+
// Update the variable in templateVariables array
|
|
21033
|
+
const variable = this.templateVariables.find(v => v.name === variableName);
|
|
21034
|
+
if (variable) {
|
|
21035
|
+
variable.value = value;
|
|
21036
|
+
}
|
|
21037
|
+
// Also update form control
|
|
21038
|
+
if (this.variablesForm.get(variableName)) {
|
|
21039
|
+
(_a = this.variablesForm.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
|
|
21040
|
+
}
|
|
21041
|
+
}
|
|
21042
|
+
onVariableBooleanChange(variableName, value) {
|
|
21043
|
+
var _a;
|
|
21044
|
+
// Update the variable in templateVariables array
|
|
21045
|
+
const variable = this.templateVariables.find(v => v.name === variableName);
|
|
21046
|
+
if (variable) {
|
|
21047
|
+
variable.value = value;
|
|
21048
|
+
}
|
|
21049
|
+
// Also update form control
|
|
21050
|
+
if (this.variablesForm.get(variableName)) {
|
|
21051
|
+
(_a = this.variablesForm.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
|
|
21052
|
+
}
|
|
21053
|
+
else {
|
|
21054
|
+
// Create form control if it doesn't exist
|
|
21055
|
+
this.variablesForm.addControl(variableName, new FormControl(value));
|
|
21056
|
+
}
|
|
20744
21057
|
}
|
|
20745
21058
|
getLanguageConfig() {
|
|
20746
21059
|
return {
|
|
@@ -20761,19 +21074,24 @@ class StepBuilderCustomCodeComponent {
|
|
|
20761
21074
|
language: formValue.language || '',
|
|
20762
21075
|
code: formValue.code || '',
|
|
20763
21076
|
metadata: formValue.metadata || '',
|
|
20764
|
-
description: formValue.description || ''
|
|
21077
|
+
description: formValue.description || '',
|
|
21078
|
+
templateVariables: this.templateVariables.length > 0 ? this.templateVariables : undefined
|
|
20765
21079
|
};
|
|
20766
21080
|
this.createStep.emit(stepData);
|
|
20767
21081
|
}
|
|
20768
21082
|
}
|
|
20769
21083
|
}
|
|
20770
21084
|
StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
20771
|
-
StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col 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 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 <!-- 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\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\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 </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle", "customClass"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }] });
|
|
21085
|
+
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" }, 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\">\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\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\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 </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle", "customClass"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
20772
21086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
|
|
20773
21087
|
type: Component,
|
|
20774
|
-
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\">\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 <!-- 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\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\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 </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
|
|
21088
|
+
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\">\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\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Textarea -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Code\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-custom-code-textarea\"\n [placeholder]=\"'// Write your code here...'\"\n [value]=\"customCodeForm.get('code')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n </cqa-custom-textarea>\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 </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
|
|
20775
21089
|
}], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { languageOptions: [{
|
|
20776
21090
|
type: Input
|
|
21091
|
+
}], template: [{
|
|
21092
|
+
type: Input
|
|
21093
|
+
}], setTemplateVariables: [{
|
|
21094
|
+
type: Input
|
|
20777
21095
|
}], createStep: [{
|
|
20778
21096
|
type: Output
|
|
20779
21097
|
}], cancelled: [{
|
|
@@ -21203,6 +21521,508 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
21203
21521
|
type: Output
|
|
21204
21522
|
}] } });
|
|
21205
21523
|
|
|
21524
|
+
class StepBuilderApiComponent {
|
|
21525
|
+
constructor(fb) {
|
|
21526
|
+
this.fb = fb;
|
|
21527
|
+
/** Options for HTTP method dropdown */
|
|
21528
|
+
this.httpMethodOptions = [
|
|
21529
|
+
{ id: 'GET', value: 'GET', name: 'GET', label: 'GET' },
|
|
21530
|
+
{ id: 'POST', value: 'POST', name: 'POST', label: 'POST' },
|
|
21531
|
+
{ id: 'PUT', value: 'PUT', name: 'PUT', label: 'PUT' },
|
|
21532
|
+
{ id: 'PATCH', value: 'PATCH', name: 'PATCH', label: 'PATCH' },
|
|
21533
|
+
{ id: 'DELETE', value: 'DELETE', name: 'DELETE', label: 'DELETE' },
|
|
21534
|
+
{ id: 'HEAD', value: 'HEAD', name: 'HEAD', label: 'HEAD' },
|
|
21535
|
+
{ id: 'OPTIONS', value: 'OPTIONS', name: 'OPTIONS', label: 'OPTIONS' }
|
|
21536
|
+
];
|
|
21537
|
+
/** Options for header name dropdown */
|
|
21538
|
+
this.headerNameOptions = [];
|
|
21539
|
+
/** Current progress step */
|
|
21540
|
+
this.currentStep = 'request-details';
|
|
21541
|
+
/** Response preview data */
|
|
21542
|
+
this.responsePreview = null;
|
|
21543
|
+
/** Loading state */
|
|
21544
|
+
this.isLoading = false;
|
|
21545
|
+
/** Emit when step is created */
|
|
21546
|
+
this.createStep = new EventEmitter();
|
|
21547
|
+
/** Emit when cancelled */
|
|
21548
|
+
this.cancelled = new EventEmitter();
|
|
21549
|
+
/** Emit when request is sent */
|
|
21550
|
+
this.sendRequest = new EventEmitter();
|
|
21551
|
+
/** Emit when cURL is imported */
|
|
21552
|
+
this.importCurl = new EventEmitter();
|
|
21553
|
+
this.selectedTab = 'headers';
|
|
21554
|
+
this.selectedProgressStep = 'request-details';
|
|
21555
|
+
// progressSteps: ProgressStep[] = ['request-details', 'store-response', 'validation'];
|
|
21556
|
+
// Cache config objects to prevent infinite change detection loops
|
|
21557
|
+
this.verificationTypeConfigCache = null;
|
|
21558
|
+
this.expectedTypeConfigCache = null;
|
|
21559
|
+
this.httpMethodConfigCache = null;
|
|
21560
|
+
this.headerNameConfigCache = null;
|
|
21561
|
+
this.paramNameConfigCache = null;
|
|
21562
|
+
this.hasLoadedInitialData = false;
|
|
21563
|
+
this.apiForm = this.fb.group({
|
|
21564
|
+
method: ['GET', Validators.required],
|
|
21565
|
+
url: ['', Validators.required],
|
|
21566
|
+
headers: this.fb.array([]),
|
|
21567
|
+
body: [''],
|
|
21568
|
+
params: this.fb.array([]),
|
|
21569
|
+
scripts: [''],
|
|
21570
|
+
variableName: [''],
|
|
21571
|
+
validation: this.fb.array([])
|
|
21572
|
+
});
|
|
21573
|
+
}
|
|
21574
|
+
ngOnInit() {
|
|
21575
|
+
// Sync currentStep input with selectedProgressStep
|
|
21576
|
+
if (this.currentStep) {
|
|
21577
|
+
this.selectedProgressStep = this.currentStep;
|
|
21578
|
+
}
|
|
21579
|
+
// Load initial data if provided (edit mode)
|
|
21580
|
+
if (this.initialData) {
|
|
21581
|
+
this.loadInitialData(this.initialData);
|
|
21582
|
+
this.hasLoadedInitialData = true;
|
|
21583
|
+
}
|
|
21584
|
+
else {
|
|
21585
|
+
// Add initial header row for new step
|
|
21586
|
+
this.addHeader();
|
|
21587
|
+
}
|
|
21588
|
+
// Initialize validation form array if starting on validation step
|
|
21589
|
+
if (this.selectedProgressStep === 'validation' && this.validationFormArray.length === 0) {
|
|
21590
|
+
this.addValidationRule();
|
|
21591
|
+
}
|
|
21592
|
+
}
|
|
21593
|
+
loadInitialData(data) {
|
|
21594
|
+
var _a;
|
|
21595
|
+
console.log('loadInitialData: Loading data', data);
|
|
21596
|
+
console.log('loadInitialData: Headers count', ((_a = data.headers) === null || _a === void 0 ? void 0 : _a.length) || 0);
|
|
21597
|
+
console.log('loadInitialData: Headers data', data.headers);
|
|
21598
|
+
// Set basic fields
|
|
21599
|
+
this.apiForm.patchValue({
|
|
21600
|
+
method: data.method || 'GET',
|
|
21601
|
+
url: data.url || '',
|
|
21602
|
+
body: data.body || '',
|
|
21603
|
+
scripts: data.scripts || '',
|
|
21604
|
+
variableName: data.variableName || ''
|
|
21605
|
+
});
|
|
21606
|
+
// Load headers
|
|
21607
|
+
// Clear existing headers first
|
|
21608
|
+
while (this.headersFormArray.length !== 0) {
|
|
21609
|
+
this.headersFormArray.removeAt(0);
|
|
21610
|
+
}
|
|
21611
|
+
if (data.headers && data.headers.length > 0) {
|
|
21612
|
+
// Add headers from initial data (include all headers, even if empty)
|
|
21613
|
+
data.headers.forEach(header => {
|
|
21614
|
+
const headerGroup = this.fb.group({
|
|
21615
|
+
name: [header.name || '', Validators.required],
|
|
21616
|
+
value: [header.value || '', Validators.required]
|
|
21617
|
+
});
|
|
21618
|
+
this.headersFormArray.push(headerGroup);
|
|
21619
|
+
});
|
|
21620
|
+
console.log('loadInitialData: Loaded headers into form array, count:', this.headersFormArray.length);
|
|
21621
|
+
}
|
|
21622
|
+
// Ensure at least one header row exists
|
|
21623
|
+
if (this.headersFormArray.length === 0) {
|
|
21624
|
+
console.log('loadInitialData: No headers found, adding empty header row');
|
|
21625
|
+
this.addHeader();
|
|
21626
|
+
}
|
|
21627
|
+
// Load params
|
|
21628
|
+
// Clear existing params first
|
|
21629
|
+
while (this.paramsFormArray.length !== 0) {
|
|
21630
|
+
this.paramsFormArray.removeAt(0);
|
|
21631
|
+
}
|
|
21632
|
+
if (data.params && data.params.length > 0) {
|
|
21633
|
+
// Add params from initial data (include all params, even if empty)
|
|
21634
|
+
data.params.forEach(param => {
|
|
21635
|
+
const paramGroup = this.fb.group({
|
|
21636
|
+
name: [param.name || '', Validators.required],
|
|
21637
|
+
value: [param.value || '', Validators.required]
|
|
21638
|
+
});
|
|
21639
|
+
this.paramsFormArray.push(paramGroup);
|
|
21640
|
+
});
|
|
21641
|
+
}
|
|
21642
|
+
// Load validation rules
|
|
21643
|
+
if (data.validation && data.validation.length > 0) {
|
|
21644
|
+
// Clear existing validation rules
|
|
21645
|
+
while (this.validationFormArray.length !== 0) {
|
|
21646
|
+
this.validationFormArray.removeAt(0);
|
|
21647
|
+
}
|
|
21648
|
+
// Add validation rules from initial data
|
|
21649
|
+
data.validation.forEach(rule => {
|
|
21650
|
+
const validationGroup = this.fb.group({
|
|
21651
|
+
jsonPath: [rule.jsonPath || '', Validators.required],
|
|
21652
|
+
verificationType: [rule.verificationType || 'equals', Validators.required],
|
|
21653
|
+
expectedType: [rule.expectedType || 'string', Validators.required],
|
|
21654
|
+
expectedValue: [rule.expectedValue !== undefined ? rule.expectedValue : '', Validators.required],
|
|
21655
|
+
result: [rule.result || 'Not run'],
|
|
21656
|
+
checked: [rule.checked || false]
|
|
21657
|
+
});
|
|
21658
|
+
// Ensure all controls are enabled
|
|
21659
|
+
validationGroup.enable({ emitEvent: false });
|
|
21660
|
+
this.validationFormArray.push(validationGroup);
|
|
21661
|
+
});
|
|
21662
|
+
}
|
|
21663
|
+
}
|
|
21664
|
+
get headersFormArray() {
|
|
21665
|
+
return this.apiForm.get('headers');
|
|
21666
|
+
}
|
|
21667
|
+
get paramsFormArray() {
|
|
21668
|
+
return this.apiForm.get('params');
|
|
21669
|
+
}
|
|
21670
|
+
get validationFormArray() {
|
|
21671
|
+
return this.apiForm.get('validation');
|
|
21672
|
+
}
|
|
21673
|
+
addHeader() {
|
|
21674
|
+
const headerGroup = this.fb.group({
|
|
21675
|
+
name: ['', Validators.required],
|
|
21676
|
+
value: ['', Validators.required]
|
|
21677
|
+
});
|
|
21678
|
+
this.headersFormArray.push(headerGroup);
|
|
21679
|
+
}
|
|
21680
|
+
removeHeader(index) {
|
|
21681
|
+
this.headersFormArray.removeAt(index);
|
|
21682
|
+
}
|
|
21683
|
+
addParam() {
|
|
21684
|
+
const paramGroup = this.fb.group({
|
|
21685
|
+
name: ['', Validators.required],
|
|
21686
|
+
value: ['', Validators.required]
|
|
21687
|
+
});
|
|
21688
|
+
this.paramsFormArray.push(paramGroup);
|
|
21689
|
+
}
|
|
21690
|
+
removeParam(index) {
|
|
21691
|
+
this.paramsFormArray.removeAt(index);
|
|
21692
|
+
}
|
|
21693
|
+
ngOnChanges(changes) {
|
|
21694
|
+
// Reset config caches when inputs change
|
|
21695
|
+
if (changes['httpMethodOptions']) {
|
|
21696
|
+
this.httpMethodConfigCache = null;
|
|
21697
|
+
}
|
|
21698
|
+
if (changes['headerNameOptions']) {
|
|
21699
|
+
this.headerNameConfigCache = null;
|
|
21700
|
+
}
|
|
21701
|
+
// Load initial data if it's set after component initialization
|
|
21702
|
+
if (changes['initialData'] && !changes['initialData'].firstChange && this.initialData && !this.hasLoadedInitialData) {
|
|
21703
|
+
this.loadInitialData(this.initialData);
|
|
21704
|
+
this.hasLoadedInitialData = true;
|
|
21705
|
+
}
|
|
21706
|
+
}
|
|
21707
|
+
getHttpMethodConfig() {
|
|
21708
|
+
if (!this.httpMethodConfigCache) {
|
|
21709
|
+
this.httpMethodConfigCache = {
|
|
21710
|
+
key: 'method',
|
|
21711
|
+
placeholder: 'Select method',
|
|
21712
|
+
multiple: false,
|
|
21713
|
+
searchable: false,
|
|
21714
|
+
options: this.httpMethodOptions
|
|
21715
|
+
};
|
|
21716
|
+
}
|
|
21717
|
+
return this.httpMethodConfigCache;
|
|
21718
|
+
}
|
|
21719
|
+
getHeaderNameConfig(index) {
|
|
21720
|
+
if (!this.headerNameConfigCache) {
|
|
21721
|
+
const defaultOptions = [
|
|
21722
|
+
{ id: 'string', value: 'string', name: 'string', label: 'string' },
|
|
21723
|
+
{ id: 'Content-Type', value: 'Content-Type', name: 'Content-Type', label: 'Content-Type' },
|
|
21724
|
+
{ id: 'Authorization', value: 'Authorization', name: 'Authorization', label: 'Authorization' },
|
|
21725
|
+
{ id: 'Accept', value: 'Accept', name: 'Accept', label: 'Accept' }
|
|
21726
|
+
];
|
|
21727
|
+
this.headerNameConfigCache = {
|
|
21728
|
+
key: 'name',
|
|
21729
|
+
placeholder: 'Select header',
|
|
21730
|
+
multiple: false,
|
|
21731
|
+
searchable: true,
|
|
21732
|
+
options: this.headerNameOptions.length > 0 ? this.headerNameOptions : defaultOptions
|
|
21733
|
+
};
|
|
21734
|
+
}
|
|
21735
|
+
return this.headerNameConfigCache;
|
|
21736
|
+
}
|
|
21737
|
+
getParamNameConfig(index) {
|
|
21738
|
+
if (!this.paramNameConfigCache) {
|
|
21739
|
+
this.paramNameConfigCache = {
|
|
21740
|
+
key: 'name',
|
|
21741
|
+
placeholder: 'Parameter name',
|
|
21742
|
+
multiple: false,
|
|
21743
|
+
searchable: false,
|
|
21744
|
+
options: []
|
|
21745
|
+
};
|
|
21746
|
+
}
|
|
21747
|
+
return this.paramNameConfigCache;
|
|
21748
|
+
}
|
|
21749
|
+
getHeaderFormGroup(index) {
|
|
21750
|
+
return this.headersFormArray.at(index);
|
|
21751
|
+
}
|
|
21752
|
+
getParamFormGroup(index) {
|
|
21753
|
+
return this.paramsFormArray.at(index);
|
|
21754
|
+
}
|
|
21755
|
+
onTabChange(tab) {
|
|
21756
|
+
this.selectedTab = tab;
|
|
21757
|
+
}
|
|
21758
|
+
onSendRequest() {
|
|
21759
|
+
if (this.apiForm.valid) {
|
|
21760
|
+
const formValue = this.apiForm.value;
|
|
21761
|
+
const headers = formValue.headers.map((h) => ({
|
|
21762
|
+
name: h.name,
|
|
21763
|
+
value: h.value
|
|
21764
|
+
}));
|
|
21765
|
+
const params = formValue.params ? formValue.params.map((p) => ({
|
|
21766
|
+
name: p.name,
|
|
21767
|
+
value: p.value
|
|
21768
|
+
})) : [];
|
|
21769
|
+
this.sendRequest.emit({
|
|
21770
|
+
method: formValue.method,
|
|
21771
|
+
url: formValue.url,
|
|
21772
|
+
headers,
|
|
21773
|
+
body: formValue.body,
|
|
21774
|
+
params
|
|
21775
|
+
});
|
|
21776
|
+
}
|
|
21777
|
+
}
|
|
21778
|
+
onImportCurl() {
|
|
21779
|
+
this.importCurl.emit();
|
|
21780
|
+
}
|
|
21781
|
+
onCancel() {
|
|
21782
|
+
this.cancelled.emit();
|
|
21783
|
+
}
|
|
21784
|
+
onCreateStep() {
|
|
21785
|
+
if (this.apiForm.valid) {
|
|
21786
|
+
const formValue = this.apiForm.value;
|
|
21787
|
+
const stepData = {
|
|
21788
|
+
method: formValue.method,
|
|
21789
|
+
url: formValue.url,
|
|
21790
|
+
headers: formValue.headers.map((h) => ({
|
|
21791
|
+
name: h.name,
|
|
21792
|
+
value: h.value
|
|
21793
|
+
})),
|
|
21794
|
+
body: formValue.body,
|
|
21795
|
+
params: formValue.params ? formValue.params.map((p) => ({
|
|
21796
|
+
name: p.name,
|
|
21797
|
+
value: p.value
|
|
21798
|
+
})) : [],
|
|
21799
|
+
scripts: formValue.scripts,
|
|
21800
|
+
variableName: formValue.variableName || '',
|
|
21801
|
+
validation: formValue.validation ? formValue.validation.map((v) => ({
|
|
21802
|
+
jsonPath: v.jsonPath,
|
|
21803
|
+
verificationType: v.verificationType,
|
|
21804
|
+
expectedType: v.expectedType,
|
|
21805
|
+
expectedValue: v.expectedValue,
|
|
21806
|
+
result: v.result || 'Not run'
|
|
21807
|
+
})) : []
|
|
21808
|
+
};
|
|
21809
|
+
this.createStep.emit(stepData);
|
|
21810
|
+
}
|
|
21811
|
+
}
|
|
21812
|
+
onNext() {
|
|
21813
|
+
// Move to next step or create step if on last step
|
|
21814
|
+
const stepOrder = ['request-details', 'store-response', 'validation'];
|
|
21815
|
+
const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
|
|
21816
|
+
if (currentIndex < stepOrder.length - 1) {
|
|
21817
|
+
this.onProgressStepChange(stepOrder[currentIndex + 1]);
|
|
21818
|
+
}
|
|
21819
|
+
else {
|
|
21820
|
+
this.onCreateStep();
|
|
21821
|
+
}
|
|
21822
|
+
}
|
|
21823
|
+
onBack() {
|
|
21824
|
+
// Move to previous step
|
|
21825
|
+
const stepOrder = ['request-details', 'store-response', 'validation'];
|
|
21826
|
+
const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
|
|
21827
|
+
if (currentIndex > 0) {
|
|
21828
|
+
this.onProgressStepChange(stepOrder[currentIndex - 1]);
|
|
21829
|
+
}
|
|
21830
|
+
}
|
|
21831
|
+
canGoBack() {
|
|
21832
|
+
const stepOrder = ['request-details', 'store-response', 'validation'];
|
|
21833
|
+
const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
|
|
21834
|
+
return currentIndex > 0;
|
|
21835
|
+
}
|
|
21836
|
+
isLastStep() {
|
|
21837
|
+
const stepOrder = ['request-details', 'store-response', 'validation'];
|
|
21838
|
+
const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
|
|
21839
|
+
return currentIndex === stepOrder.length - 1;
|
|
21840
|
+
}
|
|
21841
|
+
getProgressStepClass(step) {
|
|
21842
|
+
const stepOrder = ['request-details', 'store-response', 'validation'];
|
|
21843
|
+
const currentIndex = stepOrder.indexOf(this.currentStep);
|
|
21844
|
+
const stepIndex = stepOrder.indexOf(step);
|
|
21845
|
+
if (stepIndex < currentIndex) {
|
|
21846
|
+
return 'cqa-text-gray-400'; // Completed
|
|
21847
|
+
}
|
|
21848
|
+
else if (stepIndex === currentIndex) {
|
|
21849
|
+
return 'cqa-text-purple-600 cqa-font-semibold'; // Active
|
|
21850
|
+
}
|
|
21851
|
+
else {
|
|
21852
|
+
return 'cqa-text-gray-400'; // Pending
|
|
21853
|
+
}
|
|
21854
|
+
}
|
|
21855
|
+
getProgressStepNumber(step) {
|
|
21856
|
+
const stepOrder = ['request-details', 'store-response', 'validation'];
|
|
21857
|
+
return stepOrder.indexOf(step) + 1;
|
|
21858
|
+
}
|
|
21859
|
+
getProgressStepLabel(step) {
|
|
21860
|
+
const labels = {
|
|
21861
|
+
'request-details': 'Request Details',
|
|
21862
|
+
'store-response': 'Store Response',
|
|
21863
|
+
'validation': 'Validation'
|
|
21864
|
+
};
|
|
21865
|
+
return labels[step];
|
|
21866
|
+
}
|
|
21867
|
+
formatJsonResponse(data) {
|
|
21868
|
+
if (!data)
|
|
21869
|
+
return '';
|
|
21870
|
+
try {
|
|
21871
|
+
return JSON.stringify(data, null, 2);
|
|
21872
|
+
}
|
|
21873
|
+
catch (_a) {
|
|
21874
|
+
return String(data);
|
|
21875
|
+
}
|
|
21876
|
+
}
|
|
21877
|
+
onProgressStepChange(step) {
|
|
21878
|
+
this.selectedProgressStep = step;
|
|
21879
|
+
// Initialize validation form array if switching to validation step
|
|
21880
|
+
if (step === 'validation' && this.validationFormArray.length === 0) {
|
|
21881
|
+
this.addValidationRule();
|
|
21882
|
+
}
|
|
21883
|
+
}
|
|
21884
|
+
addValidationRule() {
|
|
21885
|
+
const validationGroup = this.fb.group({
|
|
21886
|
+
checked: [false],
|
|
21887
|
+
jsonPath: ['', Validators.required],
|
|
21888
|
+
verificationType: ['equals'],
|
|
21889
|
+
expectedType: ['string'],
|
|
21890
|
+
expectedValue: ['', Validators.required],
|
|
21891
|
+
result: ['Not run']
|
|
21892
|
+
});
|
|
21893
|
+
// Ensure all controls are enabled to avoid disabled attribute warnings
|
|
21894
|
+
validationGroup.enable({ emitEvent: false });
|
|
21895
|
+
this.validationFormArray.push(validationGroup);
|
|
21896
|
+
}
|
|
21897
|
+
removeValidationRule(index) {
|
|
21898
|
+
this.validationFormArray.removeAt(index);
|
|
21899
|
+
}
|
|
21900
|
+
getValidationFormGroup(index) {
|
|
21901
|
+
return this.validationFormArray.at(index);
|
|
21902
|
+
}
|
|
21903
|
+
trackByValidationRuleIndex(index) {
|
|
21904
|
+
return index;
|
|
21905
|
+
}
|
|
21906
|
+
trackByHeaderIndex(index) {
|
|
21907
|
+
return index;
|
|
21908
|
+
}
|
|
21909
|
+
trackByParamIndex(index) {
|
|
21910
|
+
return index;
|
|
21911
|
+
}
|
|
21912
|
+
getVerificationTypeOptions() {
|
|
21913
|
+
return [
|
|
21914
|
+
{ id: 'equals', value: 'equals', name: 'Equals', label: 'Equals' },
|
|
21915
|
+
{ id: 'not_equals', value: 'not_equals', name: 'Not Equals', label: 'Not Equals' },
|
|
21916
|
+
{ id: 'contains', value: 'contains', name: 'Contains', label: 'Contains' },
|
|
21917
|
+
{ id: 'not_contains', value: 'not_contains', name: 'Not Contains', label: 'Not Contains' },
|
|
21918
|
+
{ id: 'greater_than', value: 'greater_than', name: 'Greater Than', label: 'Greater Than' },
|
|
21919
|
+
{ id: 'less_than', value: 'less_than', name: 'Less Than', label: 'Less Than' },
|
|
21920
|
+
{ id: 'greater_than_or_equals', value: 'greater_than_or_equals', name: 'Greater Than Or Equals', label: 'Greater Than Or Equals' },
|
|
21921
|
+
{ id: 'less_than_or_equals', value: 'less_than_or_equals', name: 'Less Than Or Equals', label: 'Less Than Or Equals' },
|
|
21922
|
+
{ id: 'exists', value: 'exists', name: 'Exists', label: 'Exists' },
|
|
21923
|
+
{ id: 'not_exists', value: 'not_exists', name: 'Not Exists', label: 'Not Exists' }
|
|
21924
|
+
];
|
|
21925
|
+
}
|
|
21926
|
+
getExpectedTypeOptions() {
|
|
21927
|
+
return [
|
|
21928
|
+
{ id: 'string', value: 'string', name: 'String', label: 'String' },
|
|
21929
|
+
{ id: 'number', value: 'number', name: 'Number', label: 'Number' },
|
|
21930
|
+
{ id: 'boolean', value: 'boolean', name: 'Boolean', label: 'Boolean' },
|
|
21931
|
+
{ id: 'object', value: 'object', name: 'Object', label: 'Object' },
|
|
21932
|
+
{ id: 'array', value: 'array', name: 'Array', label: 'Array' },
|
|
21933
|
+
{ id: 'null', value: 'null', name: 'Null', label: 'Null' }
|
|
21934
|
+
];
|
|
21935
|
+
}
|
|
21936
|
+
getVerificationTypeConfig(index) {
|
|
21937
|
+
// Cache the config to prevent infinite change detection loops
|
|
21938
|
+
if (!this.verificationTypeConfigCache) {
|
|
21939
|
+
this.verificationTypeConfigCache = {
|
|
21940
|
+
key: 'verificationType',
|
|
21941
|
+
placeholder: 'Select verification type',
|
|
21942
|
+
multiple: false,
|
|
21943
|
+
searchable: false,
|
|
21944
|
+
options: this.getVerificationTypeOptions()
|
|
21945
|
+
};
|
|
21946
|
+
}
|
|
21947
|
+
return this.verificationTypeConfigCache;
|
|
21948
|
+
}
|
|
21949
|
+
getExpectedTypeConfig(index) {
|
|
21950
|
+
// Cache the config to prevent infinite change detection loops
|
|
21951
|
+
if (!this.expectedTypeConfigCache) {
|
|
21952
|
+
this.expectedTypeConfigCache = {
|
|
21953
|
+
key: 'expectedType',
|
|
21954
|
+
placeholder: 'Select expected type',
|
|
21955
|
+
multiple: false,
|
|
21956
|
+
searchable: false,
|
|
21957
|
+
options: this.getExpectedTypeOptions()
|
|
21958
|
+
};
|
|
21959
|
+
}
|
|
21960
|
+
return this.expectedTypeConfigCache;
|
|
21961
|
+
}
|
|
21962
|
+
getResultClass(result) {
|
|
21963
|
+
if (result === 'Pass') {
|
|
21964
|
+
return 'cqa-bg-green-500 cqa-text-white';
|
|
21965
|
+
}
|
|
21966
|
+
else if (result === 'Fail') {
|
|
21967
|
+
return 'cqa-bg-red-500 cqa-text-white';
|
|
21968
|
+
}
|
|
21969
|
+
return 'cqa-bg-gray-300 cqa-text-gray-700';
|
|
21970
|
+
}
|
|
21971
|
+
get allValidationRulesSelected() {
|
|
21972
|
+
return this.validationFormArray.length > 0 &&
|
|
21973
|
+
this.validationFormArray.controls.every(control => { var _a; return (_a = control.get('checked')) === null || _a === void 0 ? void 0 : _a.value; });
|
|
21974
|
+
}
|
|
21975
|
+
get someValidationRulesSelected() {
|
|
21976
|
+
return this.validationFormArray.controls.some(control => { var _a; return (_a = control.get('checked')) === null || _a === void 0 ? void 0 : _a.value; }) &&
|
|
21977
|
+
!this.allValidationRulesSelected;
|
|
21978
|
+
}
|
|
21979
|
+
onSelectAllValidationRules(checked) {
|
|
21980
|
+
this.validationFormArray.controls.forEach(control => {
|
|
21981
|
+
var _a;
|
|
21982
|
+
(_a = control.get('checked')) === null || _a === void 0 ? void 0 : _a.setValue(checked);
|
|
21983
|
+
});
|
|
21984
|
+
}
|
|
21985
|
+
onDeleteSelectedValidationRules() {
|
|
21986
|
+
const indicesToRemove = [];
|
|
21987
|
+
this.validationFormArray.controls.forEach((control, index) => {
|
|
21988
|
+
var _a;
|
|
21989
|
+
if ((_a = control.get('checked')) === null || _a === void 0 ? void 0 : _a.value) {
|
|
21990
|
+
indicesToRemove.push(index);
|
|
21991
|
+
}
|
|
21992
|
+
});
|
|
21993
|
+
// Remove in reverse order to maintain correct indices
|
|
21994
|
+
indicesToRemove.reverse().forEach(index => {
|
|
21995
|
+
this.removeValidationRule(index);
|
|
21996
|
+
});
|
|
21997
|
+
}
|
|
21998
|
+
}
|
|
21999
|
+
StepBuilderApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderApiComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
22000
|
+
StepBuilderApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderApiComponent, selector: "cqa-step-builder-api", inputs: { httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions", currentStep: "currentStep", responsePreview: "responsePreview", isLoading: "isLoading", initialData: "initialData" }, outputs: { createStep: "createStep", cancelled: "cancelled", sendRequest: "sendRequest", importCurl: "importCurl" }, 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 API Test Step\n </h2>\n\n <!-- Progress Tracker -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-mb-6 cqa-pb-4 cqa-border-b cqa-border-gray-200\">\n <!-- <div *ngFor=\"let step of progressSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\"\n [ngClass]=\"getProgressStepClass(step)\">\n <span class=\"cqa-text-sm cqa-font-medium\">{{ getProgressStepNumber(step) }} {{ getProgressStepLabel(step) }}</span>\n <span *ngIf=\"step !== 'validation'\" class=\"cqa-text-gray-300\">\u2022</span>\n </div> -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'request-details'}\" (click)=\"onProgressStepChange('request-details')\">\n <div>1</div>\n <div>Request Details</div>\n <div></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'store-response'}\" (click)=\"onProgressStepChange('store-response')\">\n <div>2</div>\n <div>Store Response</div>\n <div></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'validation'}\" (click)=\"onProgressStepChange('validation')\">\n <div>3</div>\n <div>Validation</div>\n <div></div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"selectedProgressStep === 'request-details'\">\n <!-- API Request Configuration -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-6\">\n <div class=\"cqa-w-32 cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"apiForm\"\n [config]=\"getHttpMethodConfig()\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1\">\n <cqa-custom-input\n [placeholder]=\"'Enter API endpoint URL'\"\n [value]=\"apiForm.get('url')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"apiForm.get('url')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <cqa-button\n variant=\"outlined\"\n text=\"Import API cURL\"\n (clicked)=\"onImportCurl()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n text=\"Send Request\"\n (clicked)=\"onSendRequest()\"\n [disabled]=\"!apiForm.get('url')?.value || isLoading\">\n </cqa-button>\n </div>\n\n <!-- Request Details Tabs -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n <!-- Tab Navigation -->\n <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'headers'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'headers'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'headers'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'headers'\"\n (click)=\"onTabChange('headers')\">\n Headers\n </button>\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'body'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'body'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'body'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'body'\"\n (click)=\"onTabChange('body')\">\n Body\n </button>\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'params'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'params'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'params'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'params'\"\n (click)=\"onTabChange('params')\">\n Params\n </button>\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'scripts'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'scripts'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'scripts'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'scripts'\"\n (click)=\"onTabChange('scripts')\">\n Scripts\n </button>\n </div>\n\n <!-- Tab Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-border cqa-border-gray-200 cqa-border-t-0 cqa-rounded-b-lg\">\n <!-- Headers Tab -->\n <div *ngIf=\"selectedTab === 'headers'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Name</div>\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Value</div>\n </div>\n <div *ngFor=\"let header of headersFormArray.controls; let i = index; trackBy: trackByHeaderIndex\" \n class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n <div>\n <cqa-dynamic-select\n [form]=\"getHeaderFormGroup(i)\"\n [config]=\"getHeaderNameConfig(i)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1\">\n <cqa-custom-input\n [placeholder]=\"'Header value'\"\n [value]=\"getHeaderFormGroup(i).get('value')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getHeaderFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n (click)=\"removeHeader(i)\"\n [attr.aria-label]=\"'Remove header'\">\n <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n </button>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n (click)=\"addHeader()\">\n <mat-icon class=\"cqa-text-base\">add</mat-icon>\n <span>Add Header</span>\n </button>\n </div>\n\n <!-- Body Tab -->\n <div *ngIf=\"selectedTab === 'body'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <cqa-custom-textarea\n [placeholder]=\"'Enter request body (JSON, XML, etc.)'\"\n [value]=\"apiForm.get('body')?.value || ''\"\n [fullWidth]=\"true\"\n [rows]=\"10\"\n (valueChange)=\"apiForm.get('body')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Params Tab -->\n <div *ngIf=\"selectedTab === 'params'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Name</div>\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Value</div>\n </div>\n <div *ngFor=\"let param of paramsFormArray.controls; let i = index; trackBy: trackByParamIndex\" \n class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n <div>\n <cqa-custom-input\n [placeholder]=\"'Parameter name'\"\n [value]=\"getParamFormGroup(i).get('name')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getParamFormGroup(i).get('name')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1\">\n <cqa-custom-input\n [placeholder]=\"'Parameter value'\"\n [value]=\"getParamFormGroup(i).get('value')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getParamFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n (click)=\"removeParam(i)\"\n [attr.aria-label]=\"'Remove parameter'\">\n <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n </button>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n (click)=\"addParam()\">\n <mat-icon class=\"cqa-text-base\">add</mat-icon>\n <span>Add Parameter</span>\n </button>\n </div>\n\n <!-- Scripts Tab -->\n <div *ngIf=\"selectedTab === 'scripts'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <cqa-custom-textarea\n [placeholder]=\"'Enter scripts (JavaScript, etc.)'\"\n [value]=\"apiForm.get('scripts')?.value || ''\"\n [fullWidth]=\"true\"\n [rows]=\"10\"\n (valueChange)=\"apiForm.get('scripts')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n </div>\n </div>\n\n\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'store-response'\">\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <!-- Store Response Title -->\n <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Store Response\n </h3>\n\n <!-- Variable Name Input -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n Variable Name\n </label>\n <cqa-custom-input\n [placeholder]=\"'Variable Name'\"\n [value]=\"apiForm.get('variableName')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"apiForm.get('variableName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'validation'\">\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <!-- Validation Rules Title -->\n <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Validation Rules\n </h3>\n\n <!-- Validation Rules Table -->\n <div class=\"cqa-bg-white cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-4\">\n <!-- Table Header -->\n <div class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200 cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center\">\n <mat-checkbox\n [checked]=\"allValidationRulesSelected\"\n [indeterminate]=\"someValidationRulesSelected\"\n (change)=\"onSelectAllValidationRules($event.checked)\">\n </mat-checkbox>\n </div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">jsonPath</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">verificationType</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedType</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedValue</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Result</div>\n </div>\n\n <!-- Table Body -->\n <div class=\"cqa-flex cqa-flex-col\">\n <div *ngFor=\"let validationRule of validationFormArray.controls; let i = index; trackBy: trackByValidationRuleIndex\" \n [formGroup]=\"getValidationFormGroup(i)\"\n class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-border-b cqa-border-gray-200 cqa-items-center cqa-last:border-b-0\">\n <!-- Checkbox -->\n <div class=\"cqa-flex cqa-items-center\">\n <mat-checkbox formControlName=\"checked\">\n </mat-checkbox>\n </div>\n\n <!-- jsonPath -->\n <div>\n <cqa-custom-input\n [placeholder]=\"'jsonPath'\"\n [value]=\"getValidationFormGroup(i).get('jsonPath')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValidationFormGroup(i).get('jsonPath')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- verificationType -->\n <div>\n <cqa-dynamic-select\n [form]=\"getValidationFormGroup(i)\"\n [config]=\"getVerificationTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- expectedType -->\n <div>\n <cqa-dynamic-select\n [form]=\"getValidationFormGroup(i)\"\n [config]=\"getExpectedTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- expectedValue -->\n <div>\n <cqa-custom-input\n [placeholder]=\"'expectedValue'\"\n [value]=\"getValidationFormGroup(i).get('expectedValue')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValidationFormGroup(i).get('expectedValue')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Result and Delete -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n type=\"button\"\n class=\"cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-font-medium\"\n [ngClass]=\"getResultClass(getValidationFormGroup(i).get('result')?.value || 'Not run')\">\n {{ getValidationFormGroup(i).get('result')?.value || 'Not run' }}\n </button>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n (click)=\"removeValidationRule(i)\"\n [attr.aria-label]=\"'Delete validation rule'\">\n <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Add Another Rule and Delete Selected -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-mb-4\">\n <button\n *ngIf=\"someValidationRulesSelected || allValidationRulesSelected\"\n type=\"button\"\n class=\"cqa-text-red-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-red-700 cqa-transition-colors\"\n (click)=\"onDeleteSelectedValidationRules()\">\n <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n <span>Delete Selected</span>\n </button>\n <button\n type=\"button\"\n class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n (click)=\"addValidationRule()\">\n <mat-icon class=\"cqa-text-base\">add</mat-icon>\n <span>Add Another</span>\n </button>\n </div>\n </div>\n</ng-container>\n\n\n <!-- Response Preview Section -->\n <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Response Preview</h3>\n </div>\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-overflow-auto\" style=\"max-height: 300px;\">\n <pre *ngIf=\"responsePreview\" class=\"cqa-text-xs cqa-font-mono cqa-text-gray-800 cqa-whitespace-pre-wrap\">{{ formatJsonResponse(responsePreview) }}</pre>\n <p *ngIf=\"!responsePreview\" class=\"cqa-text-sm cqa-text-gray-400 cqa-text-center cqa-py-8\">\n No response yet. Send a request to see the response preview.\n </p>\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 <!-- Cancel button (only on first step) -->\n <cqa-button\n *ngIf=\"selectedProgressStep === 'request-details'\"\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <!-- Back button (on all steps except first) -->\n <cqa-button\n *ngIf=\"selectedProgressStep !== 'request-details'\"\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Back\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onBack()\">\n </cqa-button>\n <!-- Next/Create Step button -->\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isLastStep() ? 'Create Step' : 'Next'\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"isLastStep() ? onCreateStep() : onNext()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle", "customClass"], outputs: ["valueChange", "blurred", "focused"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
22001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderApiComponent, decorators: [{
|
|
22002
|
+
type: Component,
|
|
22003
|
+
args: [{ selector: 'cqa-step-builder-api', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create API Test Step\n </h2>\n\n <!-- Progress Tracker -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-mb-6 cqa-pb-4 cqa-border-b cqa-border-gray-200\">\n <!-- <div *ngFor=\"let step of progressSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\"\n [ngClass]=\"getProgressStepClass(step)\">\n <span class=\"cqa-text-sm cqa-font-medium\">{{ getProgressStepNumber(step) }} {{ getProgressStepLabel(step) }}</span>\n <span *ngIf=\"step !== 'validation'\" class=\"cqa-text-gray-300\">\u2022</span>\n </div> -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'request-details'}\" (click)=\"onProgressStepChange('request-details')\">\n <div>1</div>\n <div>Request Details</div>\n <div></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'store-response'}\" (click)=\"onProgressStepChange('store-response')\">\n <div>2</div>\n <div>Store Response</div>\n <div></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'validation'}\" (click)=\"onProgressStepChange('validation')\">\n <div>3</div>\n <div>Validation</div>\n <div></div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"selectedProgressStep === 'request-details'\">\n <!-- API Request Configuration -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-6\">\n <div class=\"cqa-w-32 cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"apiForm\"\n [config]=\"getHttpMethodConfig()\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1\">\n <cqa-custom-input\n [placeholder]=\"'Enter API endpoint URL'\"\n [value]=\"apiForm.get('url')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"apiForm.get('url')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <cqa-button\n variant=\"outlined\"\n text=\"Import API cURL\"\n (clicked)=\"onImportCurl()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n text=\"Send Request\"\n (clicked)=\"onSendRequest()\"\n [disabled]=\"!apiForm.get('url')?.value || isLoading\">\n </cqa-button>\n </div>\n\n <!-- Request Details Tabs -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n <!-- Tab Navigation -->\n <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'headers'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'headers'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'headers'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'headers'\"\n (click)=\"onTabChange('headers')\">\n Headers\n </button>\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'body'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'body'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'body'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'body'\"\n (click)=\"onTabChange('body')\">\n Body\n </button>\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'params'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'params'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'params'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'params'\"\n (click)=\"onTabChange('params')\">\n Params\n </button>\n <button\n type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'scripts'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'scripts'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'scripts'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'scripts'\"\n (click)=\"onTabChange('scripts')\">\n Scripts\n </button>\n </div>\n\n <!-- Tab Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-border cqa-border-gray-200 cqa-border-t-0 cqa-rounded-b-lg\">\n <!-- Headers Tab -->\n <div *ngIf=\"selectedTab === 'headers'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Name</div>\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Value</div>\n </div>\n <div *ngFor=\"let header of headersFormArray.controls; let i = index; trackBy: trackByHeaderIndex\" \n class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n <div>\n <cqa-dynamic-select\n [form]=\"getHeaderFormGroup(i)\"\n [config]=\"getHeaderNameConfig(i)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1\">\n <cqa-custom-input\n [placeholder]=\"'Header value'\"\n [value]=\"getHeaderFormGroup(i).get('value')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getHeaderFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n (click)=\"removeHeader(i)\"\n [attr.aria-label]=\"'Remove header'\">\n <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n </button>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n (click)=\"addHeader()\">\n <mat-icon class=\"cqa-text-base\">add</mat-icon>\n <span>Add Header</span>\n </button>\n </div>\n\n <!-- Body Tab -->\n <div *ngIf=\"selectedTab === 'body'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <cqa-custom-textarea\n [placeholder]=\"'Enter request body (JSON, XML, etc.)'\"\n [value]=\"apiForm.get('body')?.value || ''\"\n [fullWidth]=\"true\"\n [rows]=\"10\"\n (valueChange)=\"apiForm.get('body')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Params Tab -->\n <div *ngIf=\"selectedTab === 'params'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Name</div>\n <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Value</div>\n </div>\n <div *ngFor=\"let param of paramsFormArray.controls; let i = index; trackBy: trackByParamIndex\" \n class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n <div>\n <cqa-custom-input\n [placeholder]=\"'Parameter name'\"\n [value]=\"getParamFormGroup(i).get('name')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getParamFormGroup(i).get('name')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1\">\n <cqa-custom-input\n [placeholder]=\"'Parameter value'\"\n [value]=\"getParamFormGroup(i).get('value')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getParamFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n (click)=\"removeParam(i)\"\n [attr.aria-label]=\"'Remove parameter'\">\n <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n </button>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n (click)=\"addParam()\">\n <mat-icon class=\"cqa-text-base\">add</mat-icon>\n <span>Add Parameter</span>\n </button>\n </div>\n\n <!-- Scripts Tab -->\n <div *ngIf=\"selectedTab === 'scripts'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <cqa-custom-textarea\n [placeholder]=\"'Enter scripts (JavaScript, etc.)'\"\n [value]=\"apiForm.get('scripts')?.value || ''\"\n [fullWidth]=\"true\"\n [rows]=\"10\"\n (valueChange)=\"apiForm.get('scripts')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n </div>\n </div>\n\n\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'store-response'\">\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <!-- Store Response Title -->\n <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Store Response\n </h3>\n\n <!-- Variable Name Input -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n Variable Name\n </label>\n <cqa-custom-input\n [placeholder]=\"'Variable Name'\"\n [value]=\"apiForm.get('variableName')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"apiForm.get('variableName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'validation'\">\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <!-- Validation Rules Title -->\n <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Validation Rules\n </h3>\n\n <!-- Validation Rules Table -->\n <div class=\"cqa-bg-white cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-4\">\n <!-- Table Header -->\n <div class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200 cqa-items-center\">\n <div class=\"cqa-flex cqa-items-center\">\n <mat-checkbox\n [checked]=\"allValidationRulesSelected\"\n [indeterminate]=\"someValidationRulesSelected\"\n (change)=\"onSelectAllValidationRules($event.checked)\">\n </mat-checkbox>\n </div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">jsonPath</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">verificationType</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedType</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedValue</div>\n <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Result</div>\n </div>\n\n <!-- Table Body -->\n <div class=\"cqa-flex cqa-flex-col\">\n <div *ngFor=\"let validationRule of validationFormArray.controls; let i = index; trackBy: trackByValidationRuleIndex\" \n [formGroup]=\"getValidationFormGroup(i)\"\n class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-border-b cqa-border-gray-200 cqa-items-center cqa-last:border-b-0\">\n <!-- Checkbox -->\n <div class=\"cqa-flex cqa-items-center\">\n <mat-checkbox formControlName=\"checked\">\n </mat-checkbox>\n </div>\n\n <!-- jsonPath -->\n <div>\n <cqa-custom-input\n [placeholder]=\"'jsonPath'\"\n [value]=\"getValidationFormGroup(i).get('jsonPath')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValidationFormGroup(i).get('jsonPath')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- verificationType -->\n <div>\n <cqa-dynamic-select\n [form]=\"getValidationFormGroup(i)\"\n [config]=\"getVerificationTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- expectedType -->\n <div>\n <cqa-dynamic-select\n [form]=\"getValidationFormGroup(i)\"\n [config]=\"getExpectedTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- expectedValue -->\n <div>\n <cqa-custom-input\n [placeholder]=\"'expectedValue'\"\n [value]=\"getValidationFormGroup(i).get('expectedValue')?.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValidationFormGroup(i).get('expectedValue')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Result and Delete -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n type=\"button\"\n class=\"cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-font-medium\"\n [ngClass]=\"getResultClass(getValidationFormGroup(i).get('result')?.value || 'Not run')\">\n {{ getValidationFormGroup(i).get('result')?.value || 'Not run' }}\n </button>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n (click)=\"removeValidationRule(i)\"\n [attr.aria-label]=\"'Delete validation rule'\">\n <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Add Another Rule and Delete Selected -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-mb-4\">\n <button\n *ngIf=\"someValidationRulesSelected || allValidationRulesSelected\"\n type=\"button\"\n class=\"cqa-text-red-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-red-700 cqa-transition-colors\"\n (click)=\"onDeleteSelectedValidationRules()\">\n <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n <span>Delete Selected</span>\n </button>\n <button\n type=\"button\"\n class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n (click)=\"addValidationRule()\">\n <mat-icon class=\"cqa-text-base\">add</mat-icon>\n <span>Add Another</span>\n </button>\n </div>\n </div>\n</ng-container>\n\n\n <!-- Response Preview Section -->\n <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Response Preview</h3>\n </div>\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-overflow-auto\" style=\"max-height: 300px;\">\n <pre *ngIf=\"responsePreview\" class=\"cqa-text-xs cqa-font-mono cqa-text-gray-800 cqa-whitespace-pre-wrap\">{{ formatJsonResponse(responsePreview) }}</pre>\n <p *ngIf=\"!responsePreview\" class=\"cqa-text-sm cqa-text-gray-400 cqa-text-center cqa-py-8\">\n No response yet. Send a request to see the response preview.\n </p>\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 <!-- Cancel button (only on first step) -->\n <cqa-button\n *ngIf=\"selectedProgressStep === 'request-details'\"\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <!-- Back button (on all steps except first) -->\n <cqa-button\n *ngIf=\"selectedProgressStep !== 'request-details'\"\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Back\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onBack()\">\n </cqa-button>\n <!-- Next/Create Step button -->\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isLastStep() ? 'Create Step' : 'Next'\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"isLastStep() ? onCreateStep() : onNext()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
|
|
22004
|
+
}], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { httpMethodOptions: [{
|
|
22005
|
+
type: Input
|
|
22006
|
+
}], headerNameOptions: [{
|
|
22007
|
+
type: Input
|
|
22008
|
+
}], currentStep: [{
|
|
22009
|
+
type: Input
|
|
22010
|
+
}], responsePreview: [{
|
|
22011
|
+
type: Input
|
|
22012
|
+
}], isLoading: [{
|
|
22013
|
+
type: Input
|
|
22014
|
+
}], initialData: [{
|
|
22015
|
+
type: Input
|
|
22016
|
+
}], createStep: [{
|
|
22017
|
+
type: Output
|
|
22018
|
+
}], cancelled: [{
|
|
22019
|
+
type: Output
|
|
22020
|
+
}], sendRequest: [{
|
|
22021
|
+
type: Output
|
|
22022
|
+
}], importCurl: [{
|
|
22023
|
+
type: Output
|
|
22024
|
+
}] } });
|
|
22025
|
+
|
|
21206
22026
|
class UiKitModule {
|
|
21207
22027
|
constructor(iconRegistry) {
|
|
21208
22028
|
iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
@@ -21301,6 +22121,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
21301
22121
|
CustomEditStepComponent,
|
|
21302
22122
|
ItemListComponent,
|
|
21303
22123
|
TestDataModalComponent,
|
|
22124
|
+
CreateStepGroupComponent,
|
|
22125
|
+
DeleteStepsComponent,
|
|
21304
22126
|
LiveConversationComponent,
|
|
21305
22127
|
StepBuilderActionComponent,
|
|
21306
22128
|
StepBuilderLoopComponent,
|
|
@@ -21312,7 +22134,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
21312
22134
|
StepBuilderRecordStepComponent,
|
|
21313
22135
|
StepBuilderDocumentGenerationTemplateStepComponent,
|
|
21314
22136
|
ElementListComponent,
|
|
21315
|
-
StepBuilderDocumentComponent
|
|
22137
|
+
StepBuilderDocumentComponent,
|
|
22138
|
+
StepBuilderApiComponent], imports: [CommonModule,
|
|
21316
22139
|
FormsModule,
|
|
21317
22140
|
ReactiveFormsModule,
|
|
21318
22141
|
MatIconModule,
|
|
@@ -21422,6 +22245,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
21422
22245
|
CustomEditStepComponent,
|
|
21423
22246
|
ItemListComponent,
|
|
21424
22247
|
TestDataModalComponent,
|
|
22248
|
+
CreateStepGroupComponent,
|
|
22249
|
+
DeleteStepsComponent,
|
|
21425
22250
|
LiveConversationComponent,
|
|
21426
22251
|
StepBuilderActionComponent,
|
|
21427
22252
|
StepBuilderLoopComponent,
|
|
@@ -21432,6 +22257,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
21432
22257
|
StepBuilderCustomCodeComponent,
|
|
21433
22258
|
StepBuilderRecordStepComponent,
|
|
21434
22259
|
StepBuilderDocumentGenerationTemplateStepComponent,
|
|
22260
|
+
StepBuilderApiComponent,
|
|
21435
22261
|
ElementListComponent,
|
|
21436
22262
|
StepBuilderDocumentComponent] });
|
|
21437
22263
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
@@ -21592,6 +22418,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
21592
22418
|
CustomEditStepComponent,
|
|
21593
22419
|
ItemListComponent,
|
|
21594
22420
|
TestDataModalComponent,
|
|
22421
|
+
CreateStepGroupComponent,
|
|
22422
|
+
DeleteStepsComponent,
|
|
21595
22423
|
LiveConversationComponent,
|
|
21596
22424
|
StepBuilderActionComponent,
|
|
21597
22425
|
StepBuilderLoopComponent,
|
|
@@ -21604,6 +22432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
21604
22432
|
StepBuilderDocumentGenerationTemplateStepComponent,
|
|
21605
22433
|
ElementListComponent,
|
|
21606
22434
|
StepBuilderDocumentComponent,
|
|
22435
|
+
StepBuilderApiComponent,
|
|
21607
22436
|
],
|
|
21608
22437
|
imports: [
|
|
21609
22438
|
CommonModule,
|
|
@@ -21719,6 +22548,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
21719
22548
|
CustomEditStepComponent,
|
|
21720
22549
|
ItemListComponent,
|
|
21721
22550
|
TestDataModalComponent,
|
|
22551
|
+
CreateStepGroupComponent,
|
|
22552
|
+
DeleteStepsComponent,
|
|
21722
22553
|
LiveConversationComponent,
|
|
21723
22554
|
StepBuilderActionComponent,
|
|
21724
22555
|
StepBuilderLoopComponent,
|
|
@@ -21729,6 +22560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
21729
22560
|
StepBuilderCustomCodeComponent,
|
|
21730
22561
|
StepBuilderRecordStepComponent,
|
|
21731
22562
|
StepBuilderDocumentGenerationTemplateStepComponent,
|
|
22563
|
+
StepBuilderApiComponent,
|
|
21732
22564
|
ElementListComponent,
|
|
21733
22565
|
StepBuilderDocumentComponent,
|
|
21734
22566
|
],
|
|
@@ -21911,5 +22743,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
21911
22743
|
* Generated bundle index. Do not edit.
|
|
21912
22744
|
*/
|
|
21913
22745
|
|
|
21914
|
-
export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
|
|
22746
|
+
export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderApiComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
|
|
21915
22747
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|