@cqa-lib/cqa-ui 1.1.540 → 1.1.541-gamma.7
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/.github/workflows/README.md +8 -1
- package/esm2020/lib/compare-runs/compare-runs.component.mjs +1 -1
- package/esm2020/lib/execution-screen/condition-debug-step/condition-branch-editor.component.mjs +1 -1
- package/esm2020/lib/execution-screen/db-query-execution-item/db-query-execution-item.component.mjs +1 -1
- package/esm2020/lib/execution-screen/db-verification-step/db-verification-step.component.mjs +1 -1
- package/esm2020/lib/iterations-loop/iterations-loop.component.mjs +1 -1
- package/esm2020/lib/mixed-variable-input/mixed-variable-input.component.mjs +30 -10
- package/esm2020/lib/new-global-variable-dialog/global-variable-tags-input.component.mjs +129 -0
- package/esm2020/lib/new-global-variable-dialog/new-global-variable-dialog.component.mjs +16 -5
- package/esm2020/lib/new-global-variable-dialog/new-global-variable-dialog.models.mjs +1 -1
- package/esm2020/lib/segment-control/segment-control.component.mjs +12 -4
- package/esm2020/lib/step-builder/step-builder-action/step-builder-action.component.mjs +17 -3
- package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs +17 -3
- package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +12 -3
- package/esm2020/lib/step-builder/template-variables-form/template-variables-form.component.mjs +315 -27
- package/esm2020/lib/templates/modular-table-template/folder-sidebar/folder-sidebar.component.mjs +3 -3
- package/esm2020/lib/templates/table-template.component.mjs +5 -3
- package/esm2020/lib/test-case-details/data-library-panel/data-library-panel.component.mjs +116 -0
- package/esm2020/lib/test-case-details/data-library-panel/data-library-panel.models.mjs +2 -0
- package/esm2020/lib/test-case-details/data-library-panel/element-card.component.mjs +36 -0
- package/esm2020/lib/test-case-details/data-library-panel/test-data-profile-card.component.mjs +38 -0
- package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +43 -4
- package/esm2020/lib/test-case-details/test-case-details.models.mjs +3 -1
- package/esm2020/lib/test-case-details/test-data-modal/test-data-modal-data.mjs +1 -1
- package/esm2020/lib/test-case-details/test-data-modal/test-data-modal.component.mjs +119 -6
- package/esm2020/lib/ui-kit.module.mjs +23 -3
- package/esm2020/public-api.mjs +6 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +977 -132
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +896 -62
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/new-global-variable-dialog/global-variable-tags-input.component.d.ts +39 -0
- package/lib/new-global-variable-dialog/new-global-variable-dialog.component.d.ts +5 -2
- package/lib/new-global-variable-dialog/new-global-variable-dialog.models.d.ts +8 -0
- package/lib/segment-control/segment-control.component.d.ts +3 -1
- package/lib/step-builder/step-builder-action/step-builder-action.component.d.ts +15 -1
- package/lib/step-builder/step-builder-condition/step-builder-condition.component.d.ts +15 -1
- package/lib/step-builder/step-builder-loop/step-builder-loop.component.d.ts +11 -1
- package/lib/step-builder/template-variables-form/template-variables-form.component.d.ts +71 -4
- package/lib/templates/table-template.component.d.ts +8 -1
- package/lib/test-case-details/data-library-panel/data-library-panel.component.d.ts +42 -0
- package/lib/test-case-details/data-library-panel/data-library-panel.models.d.ts +17 -0
- package/lib/test-case-details/data-library-panel/element-card.component.d.ts +13 -0
- package/lib/test-case-details/data-library-panel/test-data-profile-card.component.d.ts +13 -0
- package/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.d.ts +7 -0
- package/lib/test-case-details/test-case-details.models.d.ts +2 -0
- package/lib/test-case-details/test-data-modal/test-data-modal-data.d.ts +17 -1
- package/lib/test-case-details/test-data-modal/test-data-modal.component.d.ts +34 -6
- package/lib/ui-kit.module.d.ts +100 -96
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
- package/styles.css +1 -1
|
@@ -627,7 +627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
627
627
|
}] } });
|
|
628
628
|
|
|
629
629
|
class SegmentControlComponent {
|
|
630
|
-
constructor() {
|
|
630
|
+
constructor(cdr) {
|
|
631
|
+
this.cdr = cdr;
|
|
631
632
|
this.segments = [
|
|
632
633
|
{ label: 'Tab Group', value: 'tab-group-1' },
|
|
633
634
|
{ label: 'Tab Group', value: 'tab-group-2' },
|
|
@@ -806,18 +807,24 @@ class SegmentControlComponent {
|
|
|
806
807
|
if (!container || buttons.length === 0) {
|
|
807
808
|
this.indicatorVisible = false;
|
|
808
809
|
this.indicatorStyle = {};
|
|
810
|
+
// OnPush parents (e.g. template-variables-form) won't tick this child
|
|
811
|
+
// automatically when its own state mutates inside a microtask — explicit
|
|
812
|
+
// markForCheck is required for the indicator binding to update.
|
|
813
|
+
this.cdr.markForCheck();
|
|
809
814
|
return;
|
|
810
815
|
}
|
|
811
816
|
const index = preferredIndex !== null && preferredIndex !== void 0 ? preferredIndex : buttons.findIndex((button, idx) => { var _a; return ((_a = this.segments[idx]) === null || _a === void 0 ? void 0 : _a.value) === this.value; });
|
|
812
817
|
if (index === -1) {
|
|
813
818
|
this.indicatorVisible = false;
|
|
814
819
|
this.indicatorStyle = {};
|
|
820
|
+
this.cdr.markForCheck();
|
|
815
821
|
return;
|
|
816
822
|
}
|
|
817
823
|
const buttonEl = (_d = buttons[index]) === null || _d === void 0 ? void 0 : _d.nativeElement;
|
|
818
824
|
if (!buttonEl) {
|
|
819
825
|
this.indicatorVisible = false;
|
|
820
826
|
this.indicatorStyle = {};
|
|
827
|
+
this.cdr.markForCheck();
|
|
821
828
|
return;
|
|
822
829
|
}
|
|
823
830
|
const containerRect = container.getBoundingClientRect();
|
|
@@ -835,18 +842,19 @@ class SegmentControlComponent {
|
|
|
835
842
|
backgroundColor: isDisabled ? '#9BA0F4' : '#3F43EE',
|
|
836
843
|
};
|
|
837
844
|
this.indicatorVisible = true;
|
|
845
|
+
this.cdr.markForCheck();
|
|
838
846
|
});
|
|
839
847
|
}
|
|
840
848
|
get isIndicatorVisible() {
|
|
841
849
|
return this.indicatorVisible;
|
|
842
850
|
}
|
|
843
851
|
}
|
|
844
|
-
SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
+
SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
845
853
|
SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth", size: "size" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-flex-row cqa-items-start cqa-bg-surface-light cqa-rounded-[8px]\"\n [ngClass]=\"[\n fullWidth ? 'cqa-flex' : 'cqa-inline-flex',\n size === 'lg' ? 'cqa-h-[40px] cqa-p-[4px]' : 'cqa-h-[31.5px] cqa-p-[3.5px]'\n ]\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n [ngClass]=\"{\n 'cqa-flex-1 cqa-min-w-0': fullWidth,\n 'cqa-flex-none': !fullWidth,\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled,\n 'cqa-px-[16px] cqa-py-[6px] cqa-h-[32px]': size === 'lg',\n 'cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px]': size !== 'lg'\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n \n <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n {{ segment?.icon }}\n </mat-icon>\n\n {{ segment.label }}\n\n <span *ngIf=\"segment?.count != null\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-ml-1 cqa-px-[6px] cqa-rounded-full cqa-text-[10px] cqa-leading-[14px] cqa-font-semibold cqa-min-w-[16px]\"\n [ngClass]=\"isSelected(segment) ? 'cqa-bg-white cqa-text-[#3F43EE]' : 'cqa-bg-[#E5E7EB] cqa-text-[#475569]'\">\n {{ segment.count }}\n </span>\n\n <span *ngIf=\"segment?.tooltip\"\n style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n [matTooltip]=\"segment.tooltip\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"0\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n </span>\n </span>\n </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
846
854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
|
|
847
855
|
type: Component,
|
|
848
856
|
args: [{ selector: 'cqa-segment-control', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-flex-row cqa-items-start cqa-bg-surface-light cqa-rounded-[8px]\"\n [ngClass]=\"[\n fullWidth ? 'cqa-flex' : 'cqa-inline-flex',\n size === 'lg' ? 'cqa-h-[40px] cqa-p-[4px]' : 'cqa-h-[31.5px] cqa-p-[3.5px]'\n ]\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n [ngClass]=\"{\n 'cqa-flex-1 cqa-min-w-0': fullWidth,\n 'cqa-flex-none': !fullWidth,\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled,\n 'cqa-px-[16px] cqa-py-[6px] cqa-h-[32px]': size === 'lg',\n 'cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px]': size !== 'lg'\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n \n <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n {{ segment?.icon }}\n </mat-icon>\n\n {{ segment.label }}\n\n <span *ngIf=\"segment?.count != null\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-ml-1 cqa-px-[6px] cqa-rounded-full cqa-text-[10px] cqa-leading-[14px] cqa-font-semibold cqa-min-w-[16px]\"\n [ngClass]=\"isSelected(segment) ? 'cqa-bg-white cqa-text-[#3F43EE]' : 'cqa-bg-[#E5E7EB] cqa-text-[#475569]'\">\n {{ segment.count }}\n </span>\n\n <span *ngIf=\"segment?.tooltip\"\n style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n [matTooltip]=\"segment.tooltip\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"0\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n </span>\n </span>\n </button>\n</div>", styles: [] }]
|
|
849
|
-
}], propDecorators: { segments: [{
|
|
857
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { segments: [{
|
|
850
858
|
type: Input
|
|
851
859
|
}], value: [{
|
|
852
860
|
type: Input
|
|
@@ -7709,10 +7717,10 @@ class TableTemplateComponent {
|
|
|
7709
7717
|
}
|
|
7710
7718
|
}
|
|
7711
7719
|
TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7712
|
-
TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", filterModel: "filterModel", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", showViewModeToggle: "showViewModeToggle", viewMode: "viewMode", viewModeLabels: "viewModeLabels", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", rowSelectable: "rowSelectable", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeMenuDirection: "pageSizeMenuDirection", serverSidePagination: "serverSidePagination", totalElements: "totalElements", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", selectedItems: "selectedItems", showSelectAllInToolbar: "showSelectAllInToolbar", showDismissInToolbar: "showDismissInToolbar", allSelectedInToolbar: "allSelectedInToolbar", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", selectedItemsChange: "selectedItemsChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showExportButton\"\n variant=\"grey-solid\"\n icon=\"open_in_new\"\n [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n [disabled]=\"isExporting\"\n (clicked)=\"exportCodeClick()\"\n >\n <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n </cqa-button>\n \n <!-- Export Code Modal -->\n <cqa-export-code-modal\n *ngIf=\"showExportButton\"\n [isOpen]=\"isExportModalOpen\"\n [cases]=\"selectedCasesForExport\"\n [disabled]=\"false\"\n (closeModal)=\"closeExportModal()\"\n (export)=\"onExportModalExport($event)\">\n </cqa-export-code-modal>\n <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n (clicked)=\"toggleFilter()\"\n >\n <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n Filter \n <div [class]=\"arrowClasses\">\n <svg\n class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n viewBox=\"0 0 8 4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 0L4 4L8 0\"\n stroke=\"#0B0B0C\"\n stroke-width=\"1.33\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button\n *ngIf=\"showAutoRefreshButton\"\n variant=\"grey-solid\"\n icon=\"refresh\"\n (clicked)=\"handleRefreshClick()\"\n [tooltip]=\"'Refresh'\"\n tooltipPosition=\"below\"\n ></cqa-button>\n <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n </ng-container>\n <cqa-segment-control\n *ngIf=\"showViewModeToggle\"\n size=\"lg\"\n [segments]=\"viewModeSegments\"\n [value]=\"viewMode\"\n (valueChange)=\"onViewModeChange($event)\"\n ></cqa-segment-control>\n </div>\n </div>\n\n <cqa-selected-filters \n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [model]=\"filterModel\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n (sortChange)=\"sortChange.emit($event)\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n [actions]=\"actions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"actionClick($event)\"\n (selectAllChange)=\"onToolbarSelectAll($event)\"\n (dismiss)=\"onToolbarDismiss()\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "rowSelectable", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "enableRowReorder", "reorderHandleTooltip"], outputs: ["sortChange", "rowReorder"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions", "pageSizeMenuDirection"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7720
|
+
TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", filterModel: "filterModel", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", tagFilterTemplate: "tagFilterTemplate", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", showViewModeToggle: "showViewModeToggle", viewMode: "viewMode", viewModeLabels: "viewModeLabels", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", rowSelectable: "rowSelectable", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeMenuDirection: "pageSizeMenuDirection", serverSidePagination: "serverSidePagination", totalElements: "totalElements", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", selectedItems: "selectedItems", showSelectAllInToolbar: "showSelectAllInToolbar", showDismissInToolbar: "showDismissInToolbar", allSelectedInToolbar: "allSelectedInToolbar", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", selectedItemsChange: "selectedItemsChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showExportButton\"\n variant=\"grey-solid\"\n icon=\"open_in_new\"\n [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n [disabled]=\"isExporting\"\n (clicked)=\"exportCodeClick()\"\n >\n <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n </cqa-button>\n \n <!-- Export Code Modal -->\n <cqa-export-code-modal\n *ngIf=\"showExportButton\"\n [isOpen]=\"isExportModalOpen\"\n [cases]=\"selectedCasesForExport\"\n [disabled]=\"false\"\n (closeModal)=\"closeExportModal()\"\n (export)=\"onExportModalExport($event)\">\n </cqa-export-code-modal>\n <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n (clicked)=\"toggleFilter()\"\n >\n <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n Filter \n <div [class]=\"arrowClasses\">\n <svg\n class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n viewBox=\"0 0 8 4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 0L4 4L8 0\"\n stroke=\"#0B0B0C\"\n stroke-width=\"1.33\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button\n *ngIf=\"showAutoRefreshButton\"\n variant=\"grey-solid\"\n icon=\"refresh\"\n (clicked)=\"handleRefreshClick()\"\n [tooltip]=\"'Refresh'\"\n tooltipPosition=\"below\"\n ></cqa-button>\n <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n </ng-container>\n <cqa-segment-control\n *ngIf=\"showViewModeToggle\"\n size=\"lg\"\n [segments]=\"viewModeSegments\"\n [value]=\"viewMode\"\n (valueChange)=\"onViewModeChange($event)\"\n ></cqa-segment-control>\n </div>\n </div>\n\n <ng-container *ngIf=\"tagFilterTemplate\">\n <ng-container *ngTemplateOutlet=\"tagFilterTemplate\"></ng-container>\n </ng-container>\n\n <cqa-selected-filters\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [model]=\"filterModel\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n (sortChange)=\"sortChange.emit($event)\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n [actions]=\"actions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"actionClick($event)\"\n (selectAllChange)=\"onToolbarSelectAll($event)\"\n (dismiss)=\"onToolbarDismiss()\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "rowSelectable", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "enableRowReorder", "reorderHandleTooltip"], outputs: ["sortChange", "rowReorder"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions", "pageSizeMenuDirection"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7713
7721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
|
|
7714
7722
|
type: Component,
|
|
7715
|
-
args: [{ selector: 'cqa-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showExportButton\"\n variant=\"grey-solid\"\n icon=\"open_in_new\"\n [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n [disabled]=\"isExporting\"\n (clicked)=\"exportCodeClick()\"\n >\n <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n </cqa-button>\n \n <!-- Export Code Modal -->\n <cqa-export-code-modal\n *ngIf=\"showExportButton\"\n [isOpen]=\"isExportModalOpen\"\n [cases]=\"selectedCasesForExport\"\n [disabled]=\"false\"\n (closeModal)=\"closeExportModal()\"\n (export)=\"onExportModalExport($event)\">\n </cqa-export-code-modal>\n <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n (clicked)=\"toggleFilter()\"\n >\n <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n Filter \n <div [class]=\"arrowClasses\">\n <svg\n class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n viewBox=\"0 0 8 4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 0L4 4L8 0\"\n stroke=\"#0B0B0C\"\n stroke-width=\"1.33\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button\n *ngIf=\"showAutoRefreshButton\"\n variant=\"grey-solid\"\n icon=\"refresh\"\n (clicked)=\"handleRefreshClick()\"\n [tooltip]=\"'Refresh'\"\n tooltipPosition=\"below\"\n ></cqa-button>\n <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n </ng-container>\n <cqa-segment-control\n *ngIf=\"showViewModeToggle\"\n size=\"lg\"\n [segments]=\"viewModeSegments\"\n [value]=\"viewMode\"\n (valueChange)=\"onViewModeChange($event)\"\n ></cqa-segment-control>\n </div>\n </div>\n\n <cqa-selected-filters
|
|
7723
|
+
args: [{ selector: 'cqa-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showExportButton\"\n variant=\"grey-solid\"\n icon=\"open_in_new\"\n [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n [disabled]=\"isExporting\"\n (clicked)=\"exportCodeClick()\"\n >\n <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n </cqa-button>\n \n <!-- Export Code Modal -->\n <cqa-export-code-modal\n *ngIf=\"showExportButton\"\n [isOpen]=\"isExportModalOpen\"\n [cases]=\"selectedCasesForExport\"\n [disabled]=\"false\"\n (closeModal)=\"closeExportModal()\"\n (export)=\"onExportModalExport($event)\">\n </cqa-export-code-modal>\n <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n (clicked)=\"toggleFilter()\"\n >\n <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n Filter \n <div [class]=\"arrowClasses\">\n <svg\n class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n viewBox=\"0 0 8 4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 0L4 4L8 0\"\n stroke=\"#0B0B0C\"\n stroke-width=\"1.33\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button\n *ngIf=\"showAutoRefreshButton\"\n variant=\"grey-solid\"\n icon=\"refresh\"\n (clicked)=\"handleRefreshClick()\"\n [tooltip]=\"'Refresh'\"\n tooltipPosition=\"below\"\n ></cqa-button>\n <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n </ng-container>\n <cqa-segment-control\n *ngIf=\"showViewModeToggle\"\n size=\"lg\"\n [segments]=\"viewModeSegments\"\n [value]=\"viewMode\"\n (valueChange)=\"onViewModeChange($event)\"\n ></cqa-segment-control>\n </div>\n </div>\n\n <ng-container *ngIf=\"tagFilterTemplate\">\n <ng-container *ngTemplateOutlet=\"tagFilterTemplate\"></ng-container>\n </ng-container>\n\n <cqa-selected-filters\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [model]=\"filterModel\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n (sortChange)=\"sortChange.emit($event)\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n [actions]=\"actions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"actionClick($event)\"\n (selectAllChange)=\"onToolbarSelectAll($event)\"\n (dismiss)=\"onToolbarDismiss()\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", styles: [] }]
|
|
7716
7724
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPlaceholder: [{
|
|
7717
7725
|
type: Input
|
|
7718
7726
|
}], searchValue: [{
|
|
@@ -7751,6 +7759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
7751
7759
|
type: Input
|
|
7752
7760
|
}], otherSelectDropDownButtons: [{
|
|
7753
7761
|
type: Input
|
|
7762
|
+
}], tagFilterTemplate: [{
|
|
7763
|
+
type: Input
|
|
7754
7764
|
}], otherButtonLabel: [{
|
|
7755
7765
|
type: Input
|
|
7756
7766
|
}], otherButtonVariant: [{
|
|
@@ -9629,10 +9639,10 @@ FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
|
|
|
9629
9639
|
* position is within this many px of the end. */
|
|
9630
9640
|
FolderSidebarComponent.SCROLL_LOAD_THRESHOLD_PX = 64;
|
|
9631
9641
|
FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9632
|
-
FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n >\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2 cqa-relative\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"onSearchInput($event)\"\n (cleared)=\"onSearchClear()\"\n ></cqa-search-bar>\n <!-- Inline loading affordance during server-side folder search. Sits\n inside the relative container above so it overlays the trailing\n edge of the search input without shifting layout. -->\n <span\n *ngIf=\"folderSearchLoading\"\n class=\"cqa-absolute cqa-right-7 cqa-top-1/2 -cqa-translate-y-1/2 cqa-flex cqa-items-center\"\n aria-live=\"polite\"\n aria-label=\"Searching folders\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </span>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n Scroll-based lazy-loading at the root level: nearing the bottom emits\n `rootLoadMoreRequested`, which the host responds to by fetching the\n next page of roots. -->\n <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n (scroll)=\"onTreeScroll($event)\">\n <!-- Initial-load spinner: only renders when we have no folders yet AND\n no search active (search has its own inline spinner). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n </div>\n <div\n *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n >\n {{ labels.noFoldersFound }}\n </div>\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <!-- Synthetic loading row (lazy fetch in flight) -->\n <div\n *ngIf=\"row.kind === 'loading'\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n <span>Loading\u2026</span>\n </div>\n <!-- Synthetic load-more row (more children available on backend) -->\n <button\n *ngIf=\"row.kind === 'load-more'\"\n type=\"button\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n >\n <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n </button>\n <!-- Real folder row -->\n <div\n *ngIf=\"row.kind === 'folder'\"\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n tree container above). Per-folder children retain the explicit\n \"Load more\" button rendered inside the rows loop above, since\n subtrees aren't independently scrollable. -->\n <!-- Pagination spinner \u2014 visible only when fetching an additional page\n of roots (folders.length > 0 distinguishes from initial-load case). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </div>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n anchor at the click coords drives a cdkConnectedOverlay; CDK's\n flexible-connected positioning auto-flips up/left when the menu\n would overflow the viewport (last-folder-near-bottom case). -->\n <div #ctxAnchor cdkOverlayOrigin\n class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"></div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n (detach)=\"closeContextMenu()\"\n >\n <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n CDK Overlay teleports this template into the global overlay\n container (outside the host's cqa-ui-root), so we wrap the menu in\n an ancestor cqa-ui-root div to re-establish the utility scope. -->\n <div class=\"cqa-ui-root\">\n <div\n role=\"menu\"\n class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n </ng-container>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9642
|
+
FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n >\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2\">\n <div class=\"cqa-relative\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"onSearchInput($event)\"\n (cleared)=\"onSearchClear()\"\n ></cqa-search-bar>\n <span\n *ngIf=\"folderSearchLoading\"\n class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n aria-live=\"polite\"\n aria-label=\"Searching folders\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </span>\n </div>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n Scroll-based lazy-loading at the root level: nearing the bottom emits\n `rootLoadMoreRequested`, which the host responds to by fetching the\n next page of roots. -->\n <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n (scroll)=\"onTreeScroll($event)\">\n <!-- Initial-load spinner: only renders when we have no folders yet AND\n no search active (search has its own inline spinner). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n </div>\n <div\n *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n >\n {{ labels.noFoldersFound }}\n </div>\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <!-- Synthetic loading row (lazy fetch in flight) -->\n <div\n *ngIf=\"row.kind === 'loading'\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n <span>Loading\u2026</span>\n </div>\n <!-- Synthetic load-more row (more children available on backend) -->\n <button\n *ngIf=\"row.kind === 'load-more'\"\n type=\"button\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n >\n <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n </button>\n <!-- Real folder row -->\n <div\n *ngIf=\"row.kind === 'folder'\"\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n tree container above). Per-folder children retain the explicit\n \"Load more\" button rendered inside the rows loop above, since\n subtrees aren't independently scrollable. -->\n <!-- Pagination spinner \u2014 visible only when fetching an additional page\n of roots (folders.length > 0 distinguishes from initial-load case). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </div>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n anchor at the click coords drives a cdkConnectedOverlay; CDK's\n flexible-connected positioning auto-flips up/left when the menu\n would overflow the viewport (last-folder-near-bottom case). -->\n <div #ctxAnchor cdkOverlayOrigin\n class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"></div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n (detach)=\"closeContextMenu()\"\n >\n <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n CDK Overlay teleports this template into the global overlay\n container (outside the host's cqa-ui-root), so we wrap the menu in\n an ancestor cqa-ui-root div to re-establish the utility scope. -->\n <div class=\"cqa-ui-root\">\n <div\n role=\"menu\"\n class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n </ng-container>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9633
9643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
|
|
9634
9644
|
type: Component,
|
|
9635
|
-
args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n >\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2 cqa-relative\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"onSearchInput($event)\"\n (cleared)=\"onSearchClear()\"\n ></cqa-search-bar>\n <!-- Inline loading affordance during server-side folder search. Sits\n inside the relative container above so it overlays the trailing\n edge of the search input without shifting layout. -->\n <span\n *ngIf=\"folderSearchLoading\"\n class=\"cqa-absolute cqa-right-7 cqa-top-1/2 -cqa-translate-y-1/2 cqa-flex cqa-items-center\"\n aria-live=\"polite\"\n aria-label=\"Searching folders\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </span>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n Scroll-based lazy-loading at the root level: nearing the bottom emits\n `rootLoadMoreRequested`, which the host responds to by fetching the\n next page of roots. -->\n <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n (scroll)=\"onTreeScroll($event)\">\n <!-- Initial-load spinner: only renders when we have no folders yet AND\n no search active (search has its own inline spinner). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n </div>\n <div\n *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n >\n {{ labels.noFoldersFound }}\n </div>\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <!-- Synthetic loading row (lazy fetch in flight) -->\n <div\n *ngIf=\"row.kind === 'loading'\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n <span>Loading\u2026</span>\n </div>\n <!-- Synthetic load-more row (more children available on backend) -->\n <button\n *ngIf=\"row.kind === 'load-more'\"\n type=\"button\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n >\n <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n </button>\n <!-- Real folder row -->\n <div\n *ngIf=\"row.kind === 'folder'\"\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n tree container above). Per-folder children retain the explicit\n \"Load more\" button rendered inside the rows loop above, since\n subtrees aren't independently scrollable. -->\n <!-- Pagination spinner \u2014 visible only when fetching an additional page\n of roots (folders.length > 0 distinguishes from initial-load case). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </div>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n anchor at the click coords drives a cdkConnectedOverlay; CDK's\n flexible-connected positioning auto-flips up/left when the menu\n would overflow the viewport (last-folder-near-bottom case). -->\n <div #ctxAnchor cdkOverlayOrigin\n class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"></div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n (detach)=\"closeContextMenu()\"\n >\n <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n CDK Overlay teleports this template into the global overlay\n container (outside the host's cqa-ui-root), so we wrap the menu in\n an ancestor cqa-ui-root div to re-establish the utility scope. -->\n <div class=\"cqa-ui-root\">\n <div\n role=\"menu\"\n class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n </ng-container>\n</aside>\n", styles: [] }]
|
|
9645
|
+
args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n >\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2\">\n <div class=\"cqa-relative\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"onSearchInput($event)\"\n (cleared)=\"onSearchClear()\"\n ></cqa-search-bar>\n <span\n *ngIf=\"folderSearchLoading\"\n class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n aria-live=\"polite\"\n aria-label=\"Searching folders\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </span>\n </div>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n Scroll-based lazy-loading at the root level: nearing the bottom emits\n `rootLoadMoreRequested`, which the host responds to by fetching the\n next page of roots. -->\n <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n (scroll)=\"onTreeScroll($event)\">\n <!-- Initial-load spinner: only renders when we have no folders yet AND\n no search active (search has its own inline spinner). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n </div>\n <div\n *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n >\n {{ labels.noFoldersFound }}\n </div>\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <!-- Synthetic loading row (lazy fetch in flight) -->\n <div\n *ngIf=\"row.kind === 'loading'\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n <span>Loading\u2026</span>\n </div>\n <!-- Synthetic load-more row (more children available on backend) -->\n <button\n *ngIf=\"row.kind === 'load-more'\"\n type=\"button\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n >\n <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n </button>\n <!-- Real folder row -->\n <div\n *ngIf=\"row.kind === 'folder'\"\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n tree container above). Per-folder children retain the explicit\n \"Load more\" button rendered inside the rows loop above, since\n subtrees aren't independently scrollable. -->\n <!-- Pagination spinner \u2014 visible only when fetching an additional page\n of roots (folders.length > 0 distinguishes from initial-load case). -->\n <div\n *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n aria-live=\"polite\"\n >\n <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n </div>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n anchor at the click coords drives a cdkConnectedOverlay; CDK's\n flexible-connected positioning auto-flips up/left when the menu\n would overflow the viewport (last-folder-near-bottom case). -->\n <div #ctxAnchor cdkOverlayOrigin\n class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"></div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n (detach)=\"closeContextMenu()\"\n >\n <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n CDK Overlay teleports this template into the global overlay\n container (outside the host's cqa-ui-root), so we wrap the menu in\n an ancestor cqa-ui-root div to re-establish the utility scope. -->\n <div class=\"cqa-ui-root\">\n <div\n role=\"menu\"\n class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n </ng-container>\n</aside>\n", styles: [] }]
|
|
9636
9646
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
|
|
9637
9647
|
type: Input
|
|
9638
9648
|
}], selectedFolderId: [{
|
|
@@ -24336,7 +24346,7 @@ class CompareRunsComponent {
|
|
|
24336
24346
|
}
|
|
24337
24347
|
}
|
|
24338
24348
|
CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
24339
|
-
CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", compareMode: "compareMode", initialRunAId: "initialRunAId", initialRunBId: "initialRunBId", autoCompareOnInit: "autoCompareOnInit", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns", pageSizeMenuDirection: "pageSizeMenuDirection", hideRunSelectorsAndCompareButton: "hideRunSelectorsAndCompareButton", isExportingTestPlanCompare: "isExportingTestPlanCompare" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns", viewCompare: "viewCompare", testCaseClick: "testCaseClick", exportTestPlanCompare: "exportTestPlanCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Passed -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n </span>\n <!-- Failed -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n </span>\n <!-- Aborted -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || 'NA' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || 'NA' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n <cqa-button\n *ngIf=\"compareMode === 'testPlan'\"\n variant=\"outlined\"\n [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n [loading]=\"isExportingTestPlanCompare\"\n [disabled]=\"!canCompare\"\n (clicked)=\"onExportTestPlanCompare()\"\n ></cqa-button>\n </div>\n </div>\n\n <div\n *ngIf=\"showComparison && compareMode === 'testPlan' && testPlanCardSummary && stepComparisons && stepComparisons.length > 0\"\n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6\"\n style=\"flex-shrink: 0;\"\n >\n <div\n class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-justify-between sm:cqa-justify-start cqa-gap-2 sm:cqa-gap-3\"\n >\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[92px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#A5B4FC] cqa-bg-[#EEF2FF] cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#1E293B]\">{{ testPlanCardSummary.totalCases }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#64748B]\">Total Cases</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.passed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Passed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.failed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Failed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.regressions }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Regressions</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.fixed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Fixed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#155DFC]\">{{ testPlanCardSummary.newSteps }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">New</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.removed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Removed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.noChange }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">No Change</span>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showComparison && compareMode !== 'testPlan' && comparisonSummary && stepComparisons && stepComparisons.length > 0\"\n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\"\n >\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24349
|
+
CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", compareMode: "compareMode", initialRunAId: "initialRunAId", initialRunBId: "initialRunBId", autoCompareOnInit: "autoCompareOnInit", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns", pageSizeMenuDirection: "pageSizeMenuDirection", hideRunSelectorsAndCompareButton: "hideRunSelectorsAndCompareButton", isExportingTestPlanCompare: "isExportingTestPlanCompare" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns", viewCompare: "viewCompare", testCaseClick: "testCaseClick", exportTestPlanCompare: "exportTestPlanCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Passed -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n </span>\n <!-- Failed -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n </span>\n <!-- Aborted -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || 'NA' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || 'NA' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n <cqa-button\n *ngIf=\"compareMode === 'testPlan'\"\n variant=\"outlined\"\n [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n [loading]=\"isExportingTestPlanCompare\"\n [disabled]=\"!canCompare\"\n (clicked)=\"onExportTestPlanCompare()\"\n ></cqa-button>\n </div>\n </div>\n\n <div\n *ngIf=\"showComparison && compareMode === 'testPlan' && testPlanCardSummary && stepComparisons && stepComparisons.length > 0\"\n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6\"\n style=\"flex-shrink: 0;\"\n >\n <div\n class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-justify-between sm:cqa-justify-start cqa-gap-2 sm:cqa-gap-3\"\n >\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[92px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#A5B4FC] cqa-bg-[#EEF2FF] cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#1E293B]\">{{ testPlanCardSummary.totalCases }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#64748B]\">Total Cases</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.passed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Passed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.failed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Failed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.regressions }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Regressions</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.fixed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Fixed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#155DFC]\">{{ testPlanCardSummary.newSteps }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">New</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.removed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Removed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.noChange }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">No Change</span>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showComparison && compareMode !== 'testPlan' && comparisonSummary && stepComparisons && stepComparisons.length > 0\"\n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\"\n >\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "tagFilterTemplate", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24340
24350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
|
|
24341
24351
|
type: Component,
|
|
24342
24352
|
args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Passed -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n </span>\n <!-- Failed -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n </span>\n <!-- Aborted -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n </span>\n </div>\n </div>\n\n <div *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || 'NA' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || 'NA' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n <cqa-button\n *ngIf=\"compareMode === 'testPlan'\"\n variant=\"outlined\"\n [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n [loading]=\"isExportingTestPlanCompare\"\n [disabled]=\"!canCompare\"\n (clicked)=\"onExportTestPlanCompare()\"\n ></cqa-button>\n </div>\n </div>\n\n <div\n *ngIf=\"showComparison && compareMode === 'testPlan' && testPlanCardSummary && stepComparisons && stepComparisons.length > 0\"\n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6\"\n style=\"flex-shrink: 0;\"\n >\n <div\n class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-justify-between sm:cqa-justify-start cqa-gap-2 sm:cqa-gap-3\"\n >\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[92px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#A5B4FC] cqa-bg-[#EEF2FF] cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#1E293B]\">{{ testPlanCardSummary.totalCases }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#64748B]\">Total Cases</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.passed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Passed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.failed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Failed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.regressions }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Regressions</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.fixed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Fixed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#155DFC]\">{{ testPlanCardSummary.newSteps }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">New</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.removed }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Removed</span>\n </div>\n <div\n class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n >\n <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.noChange }}</span>\n <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">No Change</span>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showComparison && compareMode !== 'testPlan' && comparisonSummary && stepComparisons && stepComparisons.length > 0\"\n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\"\n >\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -24548,7 +24558,7 @@ class IterationsLoopComponent {
|
|
|
24548
24558
|
}
|
|
24549
24559
|
}
|
|
24550
24560
|
IterationsLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24551
|
-
IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-bg-white\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"iterations\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
24561
|
+
IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-bg-white\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"iterations\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "tagFilterTemplate", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
24552
24562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, decorators: [{
|
|
24553
24563
|
type: Component,
|
|
24554
24564
|
args: [{ selector: 'cqa-iterations-loop', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-bg-white\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"iterations\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -24620,7 +24630,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
24620
24630
|
|
|
24621
24631
|
const VAR_PATH = '[A-Za-z_][A-Za-z0-9_]*(?:\\.[A-Za-z_][A-Za-z0-9_]*|\\[\\d+\\])*';
|
|
24622
24632
|
const VAR_NAME_REGEX = new RegExp('^' + VAR_PATH + '$');
|
|
24623
|
-
|
|
24633
|
+
/**
|
|
24634
|
+
* Token regex recognizes two wrappers:
|
|
24635
|
+
* - `${name}` → local (default chip)
|
|
24636
|
+
* - `{{name}}` → Global Data
|
|
24637
|
+
*
|
|
24638
|
+
* Group 1: local name, Group 2: global name. List the `${...}` form first so its
|
|
24639
|
+
* leading `$` is consumed before the bare `{{...}}` alternative can be tried.
|
|
24640
|
+
*/
|
|
24641
|
+
const VAR_TOKEN_REGEX = new RegExp('\\$\\{(' + VAR_PATH + ')\\}|\\{\\{(' + VAR_PATH + ')\\}\\}', 'g');
|
|
24624
24642
|
const VAR_PATH_TAIL_REGEX = new RegExp('(' + VAR_PATH + ')$');
|
|
24625
24643
|
const INVALID_VAR_MESSAGE = 'Invalid variable name.';
|
|
24626
24644
|
const BLUR_HIDE_DELAY_MS = 150;
|
|
@@ -24866,7 +24884,8 @@ class MixedVariableInputComponent {
|
|
|
24866
24884
|
const structureBroken = chip.getAttribute('contenteditable') !== 'false' ||
|
|
24867
24885
|
!chip.querySelector('.cqa-var-chip__remove');
|
|
24868
24886
|
if (structureBroken) {
|
|
24869
|
-
|
|
24887
|
+
const source = chip.getAttribute('data-source') || 'plain';
|
|
24888
|
+
(_b = chip.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(this.buildChip(name, source), chip);
|
|
24870
24889
|
}
|
|
24871
24890
|
}
|
|
24872
24891
|
// Remove stray remove icons left from partial undo/redo states.
|
|
@@ -24878,6 +24897,7 @@ class MixedVariableInputComponent {
|
|
|
24878
24897
|
}
|
|
24879
24898
|
// ---- Chipification --------------------------------------------------------
|
|
24880
24899
|
autoChipify(force = false) {
|
|
24900
|
+
var _a, _b;
|
|
24881
24901
|
const editor = this.editorRef.nativeElement;
|
|
24882
24902
|
const caretRange = this.getSelectionRange();
|
|
24883
24903
|
let changed = false;
|
|
@@ -24901,7 +24921,12 @@ class MixedVariableInputComponent {
|
|
|
24901
24921
|
// Keep the token as plain text while the caret is strictly inside.
|
|
24902
24922
|
if (caretOffset > start && caretOffset < end)
|
|
24903
24923
|
continue;
|
|
24904
|
-
|
|
24924
|
+
// Capture groups: 1=local ${...}, 2=global {{...}}
|
|
24925
|
+
const name = (_b = (_a = m[1]) !== null && _a !== void 0 ? _a : m[2]) !== null && _b !== void 0 ? _b : '';
|
|
24926
|
+
const source = m[2] ? 'global' : 'plain';
|
|
24927
|
+
if (!name)
|
|
24928
|
+
continue;
|
|
24929
|
+
matches.push({ start, end, name, source });
|
|
24905
24930
|
}
|
|
24906
24931
|
if (!matches.length)
|
|
24907
24932
|
continue;
|
|
@@ -24911,7 +24936,7 @@ class MixedVariableInputComponent {
|
|
|
24911
24936
|
if (mt.start > cursor) {
|
|
24912
24937
|
frag.appendChild(document.createTextNode(text.slice(cursor, mt.start)));
|
|
24913
24938
|
}
|
|
24914
|
-
const chip = this.buildChip(mt.name);
|
|
24939
|
+
const chip = this.buildChip(mt.name, mt.source);
|
|
24915
24940
|
frag.appendChild(chip);
|
|
24916
24941
|
lastChip = chip;
|
|
24917
24942
|
cursor = mt.end;
|
|
@@ -24947,6 +24972,7 @@ class MixedVariableInputComponent {
|
|
|
24947
24972
|
}
|
|
24948
24973
|
// ---- Render / serialize ---------------------------------------------------
|
|
24949
24974
|
render(value) {
|
|
24975
|
+
var _a, _b;
|
|
24950
24976
|
const editor = this.editorRef.nativeElement;
|
|
24951
24977
|
editor.innerHTML = '';
|
|
24952
24978
|
if (!value)
|
|
@@ -24958,7 +24984,10 @@ class MixedVariableInputComponent {
|
|
|
24958
24984
|
if (m.index > lastIndex) {
|
|
24959
24985
|
editor.appendChild(document.createTextNode(value.slice(lastIndex, m.index)));
|
|
24960
24986
|
}
|
|
24961
|
-
|
|
24987
|
+
// Capture group 1 = local (`${...}`), 2 = global (`{{...}}`).
|
|
24988
|
+
const name = (_b = (_a = m[1]) !== null && _a !== void 0 ? _a : m[2]) !== null && _b !== void 0 ? _b : '';
|
|
24989
|
+
const source = m[2] ? 'global' : 'plain';
|
|
24990
|
+
editor.appendChild(this.buildChip(name, source));
|
|
24962
24991
|
lastIndex = m.index + m[0].length;
|
|
24963
24992
|
}
|
|
24964
24993
|
if (lastIndex < value.length) {
|
|
@@ -24978,8 +25007,10 @@ class MixedVariableInputComponent {
|
|
|
24978
25007
|
const el = node;
|
|
24979
25008
|
if (el.classList.contains('cqa-var-chip')) {
|
|
24980
25009
|
const name = el.getAttribute('data-var') || '';
|
|
24981
|
-
|
|
24982
|
-
|
|
25010
|
+
const source = el.getAttribute('data-source') || 'plain';
|
|
25011
|
+
if (name) {
|
|
25012
|
+
out += source === 'global' ? '{{' + name + '}}' : '${' + name + '}';
|
|
25013
|
+
}
|
|
24983
25014
|
return;
|
|
24984
25015
|
}
|
|
24985
25016
|
if (el.tagName === 'BR') {
|
|
@@ -24994,14 +25025,15 @@ class MixedVariableInputComponent {
|
|
|
24994
25025
|
editor.childNodes.forEach(walk);
|
|
24995
25026
|
return out;
|
|
24996
25027
|
}
|
|
24997
|
-
buildChip(name) {
|
|
25028
|
+
buildChip(name, source = 'plain') {
|
|
24998
25029
|
const chip = document.createElement('span');
|
|
24999
25030
|
chip.className = 'cqa-var-chip';
|
|
25000
25031
|
chip.setAttribute('contenteditable', 'false');
|
|
25001
25032
|
chip.setAttribute('data-var', name);
|
|
25033
|
+
chip.setAttribute('data-source', source);
|
|
25002
25034
|
const label = document.createElement('span');
|
|
25003
25035
|
label.className = 'cqa-var-chip__label';
|
|
25004
|
-
label.textContent = '${' + name + '}';
|
|
25036
|
+
label.textContent = source === 'global' ? '{{' + name + '}}' : '${' + name + '}';
|
|
25005
25037
|
const remove = document.createElement('span');
|
|
25006
25038
|
remove.className = 'cqa-var-chip__remove';
|
|
25007
25039
|
remove.textContent = '×';
|
|
@@ -26690,7 +26722,7 @@ class DbQueryExecutionItemComponent {
|
|
|
26690
26722
|
}
|
|
26691
26723
|
}
|
|
26692
26724
|
DbQueryExecutionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
26693
|
-
DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n <!-- Header (Collapsed View) -->\n <div \n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n (click)=\"toggle()\"\n role=\"button\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n \n <!-- Status Badge -->\n <cqa-badge class=\"cqa-mb-0.5\"\n *ngIf=\"status === 'passed'\"\n label=\"Passed\"\n backgroundColor=\"#DCFCE7\"\n textColor=\"#22C55E\"\n inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n icon=\"check_circle\"\n size=\"small\">\n </cqa-badge>\n <cqa-badge class=\"cqa-mb-0.5\"\n *ngIf=\"status === 'failed'\"\n label=\"Failed\"\n backgroundColor=\"#FEE2E2\"\n textColor=\"#DC2626\"\n icon=\"error\"\n inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n size=\"small\">\n </cqa-badge>\n \n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n {{ formatDuration(queryResult?.duration) }}\n <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n </span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy Query\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showQueryCopiedCollapsed\" \n class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n <button\n (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy Response\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showResponseCopiedCollapsed\" \n class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n <svg \n [class.cqa-rotate-180]=\"isExpanded\" \n [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n matTooltipPosition=\"above\"\n class=\"cqa-transition-transform cqa-min-w-max\" \n width=\"14\" \n height=\"14\" \n viewBox=\"0 0 14 14\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n <!-- Query Section -->\n <div class=\"cqa-px-4 cqa-py-3\">\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n <button\n (click)=\"copyQueryExpanded()\"\n class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showQueryCopiedExpanded\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n </div>\n <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n <button\n (click)=\"copyResponseExpanded()\"\n class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showResponseCopiedExpanded\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n </div>\n \n <cqa-table-template\n *ngIf=\"!isEmptyResponse && queryResult?.data\"\n [columns]=\"responseTableColumns\"\n [data]=\"queryResult?.data || []\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyResponse\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n \n <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n No data returned from this query.\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
26725
|
+
DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n <!-- Header (Collapsed View) -->\n <div \n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n (click)=\"toggle()\"\n role=\"button\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n \n <!-- Status Badge -->\n <cqa-badge class=\"cqa-mb-0.5\"\n *ngIf=\"status === 'passed'\"\n label=\"Passed\"\n backgroundColor=\"#DCFCE7\"\n textColor=\"#22C55E\"\n inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n icon=\"check_circle\"\n size=\"small\">\n </cqa-badge>\n <cqa-badge class=\"cqa-mb-0.5\"\n *ngIf=\"status === 'failed'\"\n label=\"Failed\"\n backgroundColor=\"#FEE2E2\"\n textColor=\"#DC2626\"\n icon=\"error\"\n inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n size=\"small\">\n </cqa-badge>\n \n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n {{ formatDuration(queryResult?.duration) }}\n <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n </span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy Query\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showQueryCopiedCollapsed\" \n class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n <button\n (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy Response\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showResponseCopiedCollapsed\" \n class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n <svg \n [class.cqa-rotate-180]=\"isExpanded\" \n [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n matTooltipPosition=\"above\"\n class=\"cqa-transition-transform cqa-min-w-max\" \n width=\"14\" \n height=\"14\" \n viewBox=\"0 0 14 14\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n <!-- Query Section -->\n <div class=\"cqa-px-4 cqa-py-3\">\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n <button\n (click)=\"copyQueryExpanded()\"\n class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showQueryCopiedExpanded\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n </div>\n <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n <button\n (click)=\"copyResponseExpanded()\"\n class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showResponseCopiedExpanded\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n </div>\n \n <cqa-table-template\n *ngIf=\"!isEmptyResponse && queryResult?.data\"\n [columns]=\"responseTableColumns\"\n [data]=\"queryResult?.data || []\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyResponse\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n \n <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n No data returned from this query.\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "tagFilterTemplate", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
26694
26726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, decorators: [{
|
|
26695
26727
|
type: Component,
|
|
26696
26728
|
args: [{ selector: 'cqa-db-query-execution-item', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n <!-- Header (Collapsed View) -->\n <div \n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n (click)=\"toggle()\"\n role=\"button\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n \n <!-- Status Badge -->\n <cqa-badge class=\"cqa-mb-0.5\"\n *ngIf=\"status === 'passed'\"\n label=\"Passed\"\n backgroundColor=\"#DCFCE7\"\n textColor=\"#22C55E\"\n inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n icon=\"check_circle\"\n size=\"small\">\n </cqa-badge>\n <cqa-badge class=\"cqa-mb-0.5\"\n *ngIf=\"status === 'failed'\"\n label=\"Failed\"\n backgroundColor=\"#FEE2E2\"\n textColor=\"#DC2626\"\n icon=\"error\"\n inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n size=\"small\">\n </cqa-badge>\n \n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n {{ formatDuration(queryResult?.duration) }}\n <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n </span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy Query\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showQueryCopiedCollapsed\" \n class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n <button\n (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy Response\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showResponseCopiedCollapsed\" \n class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n <svg \n [class.cqa-rotate-180]=\"isExpanded\" \n [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n matTooltipPosition=\"above\"\n class=\"cqa-transition-transform cqa-min-w-max\" \n width=\"14\" \n height=\"14\" \n viewBox=\"0 0 14 14\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n <!-- Query Section -->\n <div class=\"cqa-px-4 cqa-py-3\">\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n <button\n (click)=\"copyQueryExpanded()\"\n class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showQueryCopiedExpanded\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n </div>\n <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n <button\n (click)=\"copyResponseExpanded()\"\n class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showResponseCopiedExpanded\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </button>\n </div>\n \n <cqa-table-template\n *ngIf=\"!isEmptyResponse && queryResult?.data\"\n [columns]=\"responseTableColumns\"\n [data]=\"queryResult?.data || []\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyResponse\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n \n <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n No data returned from this query.\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -27374,7 +27406,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
|
|
|
27374
27406
|
}
|
|
27375
27407
|
}
|
|
27376
27408
|
DbVerificationStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
27377
|
-
DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", isDebug: "isDebug", canEditSteps: "canEditSteps", debugPointSet: "debugPointSet", parentSkipped: "parentSkipped", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step", subSteps: "subSteps" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" [style.background-color]=\"!isDebug ? null : getStatus().toLowerCase() === 'paused' ? '#FFF9E9' : getStatus().toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\"\n style=\"border-bottom: 1px solid #F3F4F6\">\n <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n matTooltipPosition=\"right\">\n <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n </svg>\n <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n </svg>\n </button>\n </div>\n <!-- Status Icon -->\n <!-- Success -->\n <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Failure -->\n <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Pending -->\n <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Running - Show spinner -->\n <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <div *ngIf=\"getStatus().toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n </svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n Database\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <!-- Step Change Badges (debug only) -->\n <ng-container *ngIf=\"isDebug\">\n <ng-container *ngFor=\"let badge of stepBadges\">\n <cqa-badge\n *ngIf=\"badge === 'skipped'\"\n label=\"Skipped\"\n size=\"small\"\n [textColor]=\"'#4A5565'\"\n [borderColor]=\"'#99A1AF'\"\n [backgroundColor]=\"'#FFFFFF'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'edited'\"\n label=\"Edited\"\n size=\"small\"\n [textColor]=\"'#FBBF24'\"\n [borderColor]=\"'#FDDF92'\"\n [backgroundColor]=\"'#FFF9E9'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'added'\"\n label=\"Added\"\n size=\"small\"\n [textColor]=\"'#0DBD7D'\"\n [borderColor]=\"'#5ED3A8'\"\n [backgroundColor]=\"'#CFF2E5'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'removed'\"\n label=\"Removed\"\n size=\"small\"\n [textColor]=\"'#EE3F3F'\"\n [borderColor]=\"'#F47F7F'\"\n [backgroundColor]=\"'#FCD9D9'\">\n </cqa-badge>\n </ng-container>\n </ng-container>\n <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n </svg>\n Self-healed\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n *ngIf=\"step?.executedResult?.video_start_time\" \n [matTooltip]=\"'Jump to video time'\" \n matTooltipPosition=\"below\"\n (click)=\"onJumpToTimestamp($event)\">\n <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n play_arrow\n </mat-icon>\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n </span>\n </div>\n <div *ngIf=\"isDebug && canEditSteps\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n </button>\n <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n </button>\n <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n </button>\n <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n </div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps || !isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Sub-steps (logs) - shown when expanded for both live and run result -->\n <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9 cqa-pr-6 cqa-pb-2 cqa-bg-white\">\n <ng-container *ngFor=\"let subStep of (isLive ? processedSubSteps : processedSubStepsForRunResult)\">\n <cqa-ai-logs-with-reasoning\n *ngIf=\"$any(subStep).isAiAutoHealResult\"\n [status]=\"subStep.status\"\n [text]=\"$any(subStep).text || subStep?.value\"\n [description]=\"$any(subStep).description || subStep?.text || subStep?.value\"\n [reasoning]=\"$any(subStep).reasoning || subStep?.reasoning\"\n [duration]=\"subStep.duration\">\n </cqa-ai-logs-with-reasoning>\n\n <div\n *ngIf=\"!$any(subStep).isAiAutoHealResult\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n {{ $any(subStep).description || $any(subStep).text }}\n <span *ngIf=\"isLive && $any(subStep).remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\">({{ $any(subStep).remainingSeconds }}s remaining)</span>\n </span>\n\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content (db queries, assertions, etc.) - run result only -->\n <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Summary Bar -->\n <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <!-- Status Badge -->\n <cqa-badge\n *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n label=\"FAIL\"\n backgroundColor=\"#DC2626\"\n textColor=\"#FFFFFF\"\n size=\"small\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n label=\"PASS\"\n backgroundColor=\"#22C55E\"\n textColor=\"#FFFFFF\"\n size=\"small\">\n </cqa-badge>\n\n <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n \n <!-- Summary Stats -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n </div>\n </div>\n\n <!-- Failure Banner -->\n <div \n *ngIf=\"getFailureMessage()\"\n class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n {{ getFailureMessage() }}\n </span>\n </div>\n </div>\n\n <!-- Database Environment Section -->\n <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n <!-- Environment -->\n <div class=\"\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showEnvironmentCopied\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </span>\n </div>\n </div>\n \n <div class=\"\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n <cqa-db-query-execution-item\n *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n [queryNumber]=\"i + 1\"\n [queryKey]=\"queryItem.key\"\n [queryResult]=\"queryItem.result\"\n [status]=\"getQueryStatus(queryItem.key)\"\n [variableName]=\"queryItem.key\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n </cqa-db-query-execution-item>\n </div>\n </div>\n\n <!-- Verification Section -->\n <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div> \n <!-- Verification Table -->\n <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n <!-- Segment Control for Filters -->\n <cqa-segment-control\n [segments]=\"filterSegments\"\n [value]=\"verificationFilter\"\n (valueChange)=\"onFilterChange($event)\">\n </cqa-segment-control>\n <cqa-table-template\n [columns]=\"verificationTableColumns\"\n [data]=\"getTableData()\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyTable\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [id]=\"step?.testStepId\"\n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: AiLogsWithReasoningComponent, selector: "cqa-ai-logs-with-reasoning", inputs: ["status", "text", "description", "reasoning", "duration"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName", "onJsonPathCopiedHandler"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
|
|
27409
|
+
DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", isDebug: "isDebug", canEditSteps: "canEditSteps", debugPointSet: "debugPointSet", parentSkipped: "parentSkipped", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step", subSteps: "subSteps" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" [style.background-color]=\"!isDebug ? null : getStatus().toLowerCase() === 'paused' ? '#FFF9E9' : getStatus().toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\"\n style=\"border-bottom: 1px solid #F3F4F6\">\n <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n matTooltipPosition=\"right\">\n <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n </svg>\n <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n </svg>\n </button>\n </div>\n <!-- Status Icon -->\n <!-- Success -->\n <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Failure -->\n <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Pending -->\n <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Running - Show spinner -->\n <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <div *ngIf=\"getStatus().toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n </svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n Database\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <!-- Step Change Badges (debug only) -->\n <ng-container *ngIf=\"isDebug\">\n <ng-container *ngFor=\"let badge of stepBadges\">\n <cqa-badge\n *ngIf=\"badge === 'skipped'\"\n label=\"Skipped\"\n size=\"small\"\n [textColor]=\"'#4A5565'\"\n [borderColor]=\"'#99A1AF'\"\n [backgroundColor]=\"'#FFFFFF'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'edited'\"\n label=\"Edited\"\n size=\"small\"\n [textColor]=\"'#FBBF24'\"\n [borderColor]=\"'#FDDF92'\"\n [backgroundColor]=\"'#FFF9E9'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'added'\"\n label=\"Added\"\n size=\"small\"\n [textColor]=\"'#0DBD7D'\"\n [borderColor]=\"'#5ED3A8'\"\n [backgroundColor]=\"'#CFF2E5'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'removed'\"\n label=\"Removed\"\n size=\"small\"\n [textColor]=\"'#EE3F3F'\"\n [borderColor]=\"'#F47F7F'\"\n [backgroundColor]=\"'#FCD9D9'\">\n </cqa-badge>\n </ng-container>\n </ng-container>\n <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n </svg>\n Self-healed\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n *ngIf=\"step?.executedResult?.video_start_time\" \n [matTooltip]=\"'Jump to video time'\" \n matTooltipPosition=\"below\"\n (click)=\"onJumpToTimestamp($event)\">\n <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n play_arrow\n </mat-icon>\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n </span>\n </div>\n <div *ngIf=\"isDebug && canEditSteps\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n </button>\n <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n </button>\n <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n </button>\n <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n </div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps || !isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Sub-steps (logs) - shown when expanded for both live and run result -->\n <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9 cqa-pr-6 cqa-pb-2 cqa-bg-white\">\n <ng-container *ngFor=\"let subStep of (isLive ? processedSubSteps : processedSubStepsForRunResult)\">\n <cqa-ai-logs-with-reasoning\n *ngIf=\"$any(subStep).isAiAutoHealResult\"\n [status]=\"subStep.status\"\n [text]=\"$any(subStep).text || subStep?.value\"\n [description]=\"$any(subStep).description || subStep?.text || subStep?.value\"\n [reasoning]=\"$any(subStep).reasoning || subStep?.reasoning\"\n [duration]=\"subStep.duration\">\n </cqa-ai-logs-with-reasoning>\n\n <div\n *ngIf=\"!$any(subStep).isAiAutoHealResult\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n {{ $any(subStep).description || $any(subStep).text }}\n <span *ngIf=\"isLive && $any(subStep).remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\">({{ $any(subStep).remainingSeconds }}s remaining)</span>\n </span>\n\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content (db queries, assertions, etc.) - run result only -->\n <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Summary Bar -->\n <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <!-- Status Badge -->\n <cqa-badge\n *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n label=\"FAIL\"\n backgroundColor=\"#DC2626\"\n textColor=\"#FFFFFF\"\n size=\"small\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n label=\"PASS\"\n backgroundColor=\"#22C55E\"\n textColor=\"#FFFFFF\"\n size=\"small\">\n </cqa-badge>\n\n <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n \n <!-- Summary Stats -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n </div>\n </div>\n\n <!-- Failure Banner -->\n <div \n *ngIf=\"getFailureMessage()\"\n class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n {{ getFailureMessage() }}\n </span>\n </div>\n </div>\n\n <!-- Database Environment Section -->\n <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n <!-- Environment -->\n <div class=\"\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showEnvironmentCopied\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </span>\n </div>\n </div>\n \n <div class=\"\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n <cqa-db-query-execution-item\n *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n [queryNumber]=\"i + 1\"\n [queryKey]=\"queryItem.key\"\n [queryResult]=\"queryItem.result\"\n [status]=\"getQueryStatus(queryItem.key)\"\n [variableName]=\"queryItem.key\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n </cqa-db-query-execution-item>\n </div>\n </div>\n\n <!-- Verification Section -->\n <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div> \n <!-- Verification Table -->\n <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n <!-- Segment Control for Filters -->\n <cqa-segment-control\n [segments]=\"filterSegments\"\n [value]=\"verificationFilter\"\n (valueChange)=\"onFilterChange($event)\">\n </cqa-segment-control>\n <cqa-table-template\n [columns]=\"verificationTableColumns\"\n [data]=\"getTableData()\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyTable\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [id]=\"step?.testStepId\"\n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: AiLogsWithReasoningComponent, selector: "cqa-ai-logs-with-reasoning", inputs: ["status", "text", "description", "reasoning", "duration"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName", "onJsonPathCopiedHandler"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "tagFilterTemplate", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "showViewModeToggle", "viewMode", "viewModeLabels", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems", "showSelectAllInToolbar", "showDismissInToolbar", "allSelectedInToolbar", "columnVisibility"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "viewModeChange", "pageChange", "sortChange", "onReload", "onAutoRefreshClick", "columnVisibilityChange", "autoRefreshIntervalChange", "bulkActionClick", "bulkSelectAllChange", "bulkDismiss", "selectedItemsChange"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
|
|
27378
27410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, decorators: [{
|
|
27379
27411
|
type: Component,
|
|
27380
27412
|
args: [{ selector: 'cqa-db-verification-step', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" [style.background-color]=\"!isDebug ? null : getStatus().toLowerCase() === 'paused' ? '#FFF9E9' : getStatus().toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\"\n style=\"border-bottom: 1px solid #F3F4F6\">\n <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n matTooltipPosition=\"right\">\n <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n </svg>\n <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n </svg>\n </button>\n </div>\n <!-- Status Icon -->\n <!-- Success -->\n <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Failure -->\n <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Pending -->\n <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- Running - Show spinner -->\n <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <div *ngIf=\"getStatus().toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n </svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n Database\n </span>\n <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n Deleted\n </span>\n\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <!-- Step Change Badges (debug only) -->\n <ng-container *ngIf=\"isDebug\">\n <ng-container *ngFor=\"let badge of stepBadges\">\n <cqa-badge\n *ngIf=\"badge === 'skipped'\"\n label=\"Skipped\"\n size=\"small\"\n [textColor]=\"'#4A5565'\"\n [borderColor]=\"'#99A1AF'\"\n [backgroundColor]=\"'#FFFFFF'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'edited'\"\n label=\"Edited\"\n size=\"small\"\n [textColor]=\"'#FBBF24'\"\n [borderColor]=\"'#FDDF92'\"\n [backgroundColor]=\"'#FFF9E9'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'added'\"\n label=\"Added\"\n size=\"small\"\n [textColor]=\"'#0DBD7D'\"\n [borderColor]=\"'#5ED3A8'\"\n [backgroundColor]=\"'#CFF2E5'\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"badge === 'removed'\"\n label=\"Removed\"\n size=\"small\"\n [textColor]=\"'#EE3F3F'\"\n [borderColor]=\"'#F47F7F'\"\n [backgroundColor]=\"'#FCD9D9'\">\n </cqa-badge>\n </ng-container>\n </ng-container>\n <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n </svg>\n Self-healed\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n *ngIf=\"step?.executedResult?.video_start_time\" \n [matTooltip]=\"'Jump to video time'\" \n matTooltipPosition=\"below\"\n (click)=\"onJumpToTimestamp($event)\">\n <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n play_arrow\n </mat-icon>\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n </span>\n </div>\n <div *ngIf=\"isDebug && canEditSteps\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n </button>\n <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n </button>\n <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n </button>\n <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n </div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps || !isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Sub-steps (logs) - shown when expanded for both live and run result -->\n <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9 cqa-pr-6 cqa-pb-2 cqa-bg-white\">\n <ng-container *ngFor=\"let subStep of (isLive ? processedSubSteps : processedSubStepsForRunResult)\">\n <cqa-ai-logs-with-reasoning\n *ngIf=\"$any(subStep).isAiAutoHealResult\"\n [status]=\"subStep.status\"\n [text]=\"$any(subStep).text || subStep?.value\"\n [description]=\"$any(subStep).description || subStep?.text || subStep?.value\"\n [reasoning]=\"$any(subStep).reasoning || subStep?.reasoning\"\n [duration]=\"subStep.duration\">\n </cqa-ai-logs-with-reasoning>\n\n <div\n *ngIf=\"!$any(subStep).isAiAutoHealResult\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n {{ $any(subStep).description || $any(subStep).text }}\n <span *ngIf=\"isLive && $any(subStep).remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\">({{ $any(subStep).remainingSeconds }}s remaining)</span>\n </span>\n\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n {{ formatDuration(subStep.duration) }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content (db queries, assertions, etc.) - run result only -->\n <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Summary Bar -->\n <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <!-- Status Badge -->\n <cqa-badge\n *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n label=\"FAIL\"\n backgroundColor=\"#DC2626\"\n textColor=\"#FFFFFF\"\n size=\"small\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n label=\"PASS\"\n backgroundColor=\"#22C55E\"\n textColor=\"#FFFFFF\"\n size=\"small\">\n </cqa-badge>\n\n <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n \n <!-- Summary Stats -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n </div>\n </div>\n\n <!-- Failure Banner -->\n <div \n *ngIf=\"getFailureMessage()\"\n class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n {{ getFailureMessage() }}\n </span>\n </div>\n </div>\n\n <!-- Database Environment Section -->\n <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n <!-- Environment -->\n <div class=\"\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n \n <!-- Copied Tooltip -->\n <div \n *ngIf=\"showEnvironmentCopied\" \n class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n style=\"animation: fadeInOut 0.2s ease-in-out;\">\n Copied!\n </div>\n </span>\n </div>\n </div>\n \n <div class=\"\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n <cqa-db-query-execution-item\n *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n [queryNumber]=\"i + 1\"\n [queryKey]=\"queryItem.key\"\n [queryResult]=\"queryItem.result\"\n [status]=\"getQueryStatus(queryItem.key)\"\n [variableName]=\"queryItem.key\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n </cqa-db-query-execution-item>\n </div>\n </div>\n\n <!-- Verification Section -->\n <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div> \n <!-- Verification Table -->\n <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n <!-- Segment Control for Filters -->\n <cqa-segment-control\n [segments]=\"filterSegments\"\n [value]=\"verificationFilter\"\n (valueChange)=\"onFilterChange($event)\">\n </cqa-segment-control>\n <cqa-table-template\n [columns]=\"verificationTableColumns\"\n [data]=\"getTableData()\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyTable\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [id]=\"step?.testStepId\"\n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path 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\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -28691,10 +28723,11 @@ const MOCK_PARAMETERS = [
|
|
|
28691
28723
|
{ id: '4', name: 'session_id', value: 'abc123xvz456...', scope: 'Local' },
|
|
28692
28724
|
];
|
|
28693
28725
|
|
|
28694
|
-
const
|
|
28726
|
+
const ALL_TAB_SEGMENTS = [
|
|
28695
28727
|
{ label: 'Plain Text', value: 'plain-text' },
|
|
28696
28728
|
{ label: 'Parameter', value: 'parameter' },
|
|
28697
28729
|
{ label: 'Environment', value: 'environment' },
|
|
28730
|
+
{ label: 'Global Data', value: 'global' },
|
|
28698
28731
|
{ label: 'Runtime', value: 'runtime' },
|
|
28699
28732
|
];
|
|
28700
28733
|
const PARAMETER_FILTER_TABS = [
|
|
@@ -28713,7 +28746,7 @@ const RUNTIME_SUGGESTED_VALUES = [
|
|
|
28713
28746
|
];
|
|
28714
28747
|
class TestDataModalComponent {
|
|
28715
28748
|
constructor(fb, cdr, ref, data) {
|
|
28716
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
28749
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
28717
28750
|
this.fb = fb;
|
|
28718
28751
|
this.cdr = cdr;
|
|
28719
28752
|
this.ref = ref;
|
|
@@ -28724,12 +28757,21 @@ class TestDataModalComponent {
|
|
|
28724
28757
|
this.parameterEdit = new EventEmitter();
|
|
28725
28758
|
this.environmentCreate = new EventEmitter();
|
|
28726
28759
|
this.environmentEdit = new EventEmitter();
|
|
28727
|
-
|
|
28760
|
+
/** Server-side search for global variables. */
|
|
28761
|
+
this.searchGlobalVariables = new EventEmitter();
|
|
28762
|
+
/** Computed segments — recomputed in ngOnChanges, never as a getter (segment-control needs a stable ref). */
|
|
28763
|
+
this.tabSegments = ALL_TAB_SEGMENTS.filter(s => s.value !== 'parameter');
|
|
28728
28764
|
this.parameterFilterTabs = PARAMETER_FILTER_TABS;
|
|
28729
28765
|
/** Parameter list from input, falls back to mock data if not provided. */
|
|
28730
28766
|
this.parameters = MOCK_PARAMETERS;
|
|
28731
28767
|
/** Environment list from input, falls back to mock data if not provided. */
|
|
28732
28768
|
this.environmentItems = MOCK_ENVIRONMENT_ITEMS;
|
|
28769
|
+
/** Global Data variables (workspace-scoped) for the new Global Data tab. */
|
|
28770
|
+
this.globalVariables = [];
|
|
28771
|
+
/** True while the consuming app loads global variables (search/initial). */
|
|
28772
|
+
this.isLoadingGlobalVariables = false;
|
|
28773
|
+
/** When set, the Test Data Profile tab is shown — gated on test case having a TDP. */
|
|
28774
|
+
this.testCaseTestDataId = null;
|
|
28733
28775
|
/** Runtime tab: suggested variable chips. */
|
|
28734
28776
|
this.runtimeSuggestedValues = RUNTIME_SUGGESTED_VALUES;
|
|
28735
28777
|
/** Local copy of form value for Cancel revert (same pattern as Loop Step editSnapshot). */
|
|
@@ -28747,6 +28789,9 @@ class TestDataModalComponent {
|
|
|
28747
28789
|
this.selectedParameterId = null;
|
|
28748
28790
|
this.environmentSearchQuery = '';
|
|
28749
28791
|
this.selectedEnvironmentId = null;
|
|
28792
|
+
this.globalVariableSearchQuery = '';
|
|
28793
|
+
/** Stores the variable NAME (used as the id for the row, since names are unique within a workspace). */
|
|
28794
|
+
this.selectedGlobalVariableId = null;
|
|
28750
28795
|
this.runtimeValue = '';
|
|
28751
28796
|
if (data) {
|
|
28752
28797
|
this.value = (_a = data.value) !== null && _a !== void 0 ? _a : '';
|
|
@@ -28758,6 +28803,11 @@ class TestDataModalComponent {
|
|
|
28758
28803
|
this.environmentSearchQuery = (_g = data.environmentSearchQuery) !== null && _g !== void 0 ? _g : '';
|
|
28759
28804
|
this.selectedEnvironmentId = (_h = data.selectedEnvironmentId) !== null && _h !== void 0 ? _h : null;
|
|
28760
28805
|
this.runtimeValue = (_j = data.runtimeValue) !== null && _j !== void 0 ? _j : '';
|
|
28806
|
+
this.globalVariableSearchQuery = (_k = data.globalVariableSearchQuery) !== null && _k !== void 0 ? _k : '';
|
|
28807
|
+
this.selectedGlobalVariableId = (_l = data.selectedGlobalVariableId) !== null && _l !== void 0 ? _l : null;
|
|
28808
|
+
if (data.testCaseTestDataId !== undefined) {
|
|
28809
|
+
this.testCaseTestDataId = (_m = data.testCaseTestDataId) !== null && _m !== void 0 ? _m : null;
|
|
28810
|
+
}
|
|
28761
28811
|
// Set parameters and environmentItems from data if provided
|
|
28762
28812
|
if (data.parameters !== undefined) {
|
|
28763
28813
|
this.parameters = data.parameters;
|
|
@@ -28765,17 +28815,25 @@ class TestDataModalComponent {
|
|
|
28765
28815
|
if (data.environmentItems !== undefined) {
|
|
28766
28816
|
this.environmentItems = data.environmentItems;
|
|
28767
28817
|
}
|
|
28818
|
+
if (data.globalVariables !== undefined) {
|
|
28819
|
+
this.globalVariables = data.globalVariables;
|
|
28820
|
+
}
|
|
28768
28821
|
}
|
|
28769
|
-
this.plainTextValue = this.activeTab === 'plain-text' ? ((
|
|
28822
|
+
this.plainTextValue = this.activeTab === 'plain-text' ? ((_o = this.value) !== null && _o !== void 0 ? _o : '') : '';
|
|
28823
|
+
this.recomputeVisibleTabs();
|
|
28770
28824
|
}
|
|
28771
28825
|
ngOnInit() {
|
|
28772
28826
|
this.buildEditForm();
|
|
28773
28827
|
this.buildSelectConfigs();
|
|
28828
|
+
this.recomputeVisibleTabs();
|
|
28774
28829
|
this.editSnapshot = Object.assign({}, this.editForm.value);
|
|
28775
28830
|
this.cdr.markForCheck();
|
|
28776
28831
|
}
|
|
28777
28832
|
ngOnChanges(changes) {
|
|
28778
28833
|
var _a, _b, _c, _d, _e, _f;
|
|
28834
|
+
if (changes['testCaseTestDataId']) {
|
|
28835
|
+
this.recomputeVisibleTabs();
|
|
28836
|
+
}
|
|
28779
28837
|
if (!this.editForm) {
|
|
28780
28838
|
return;
|
|
28781
28839
|
}
|
|
@@ -28792,9 +28850,14 @@ class TestDataModalComponent {
|
|
|
28792
28850
|
this.syncStateFromForm();
|
|
28793
28851
|
this.cdr.markForCheck();
|
|
28794
28852
|
}
|
|
28853
|
+
/** Memoize visible segments — `[segments]`-style refs must be stable across CD passes. */
|
|
28854
|
+
recomputeVisibleTabs() {
|
|
28855
|
+
const showTdp = this.testCaseTestDataId != null;
|
|
28856
|
+
this.tabSegments = ALL_TAB_SEGMENTS.filter(s => s.value !== 'parameter' || showTdp);
|
|
28857
|
+
}
|
|
28795
28858
|
/** Build form with all control values (same pattern as Loop Step buildEditForm). */
|
|
28796
28859
|
buildEditForm() {
|
|
28797
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
28860
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
28798
28861
|
this.editForm = this.fb.group({
|
|
28799
28862
|
value: [(_a = this.value) !== null && _a !== void 0 ? _a : ''],
|
|
28800
28863
|
activeTab: [(_b = this.activeTab) !== null && _b !== void 0 ? _b : 'plain-text'],
|
|
@@ -28803,12 +28866,14 @@ class TestDataModalComponent {
|
|
|
28803
28866
|
selectedParameterId: [(_e = this.selectedParameterId) !== null && _e !== void 0 ? _e : null],
|
|
28804
28867
|
environmentSearchQuery: [(_f = this.environmentSearchQuery) !== null && _f !== void 0 ? _f : ''],
|
|
28805
28868
|
selectedEnvironmentId: [(_g = this.selectedEnvironmentId) !== null && _g !== void 0 ? _g : null],
|
|
28806
|
-
|
|
28869
|
+
globalVariableSearchQuery: [(_h = this.globalVariableSearchQuery) !== null && _h !== void 0 ? _h : ''],
|
|
28870
|
+
selectedGlobalVariableId: [(_j = this.selectedGlobalVariableId) !== null && _j !== void 0 ? _j : null],
|
|
28871
|
+
runtimeValue: [(_k = this.runtimeValue) !== null && _k !== void 0 ? _k : ''],
|
|
28807
28872
|
});
|
|
28808
28873
|
}
|
|
28809
28874
|
/** Build select configs once (same pattern as Loop Step buildSelectConfigs). */
|
|
28810
28875
|
buildSelectConfigs() {
|
|
28811
|
-
const tabOptions =
|
|
28876
|
+
const tabOptions = ALL_TAB_SEGMENTS.map((s) => ({
|
|
28812
28877
|
id: s.value,
|
|
28813
28878
|
value: s.value,
|
|
28814
28879
|
name: s.label,
|
|
@@ -28845,7 +28910,7 @@ class TestDataModalComponent {
|
|
|
28845
28910
|
}
|
|
28846
28911
|
/** Sync component state from editForm so getters (e.g. filteredParameters) stay correct. */
|
|
28847
28912
|
syncStateFromForm() {
|
|
28848
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
28913
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
28849
28914
|
const v = this.editForm.value;
|
|
28850
28915
|
this.value = (_a = v.value) !== null && _a !== void 0 ? _a : '';
|
|
28851
28916
|
this.activeTab = ((_b = v.activeTab) !== null && _b !== void 0 ? _b : 'plain-text');
|
|
@@ -28854,7 +28919,9 @@ class TestDataModalComponent {
|
|
|
28854
28919
|
this.selectedParameterId = (_e = v.selectedParameterId) !== null && _e !== void 0 ? _e : null;
|
|
28855
28920
|
this.environmentSearchQuery = (_f = v.environmentSearchQuery) !== null && _f !== void 0 ? _f : '';
|
|
28856
28921
|
this.selectedEnvironmentId = (_g = v.selectedEnvironmentId) !== null && _g !== void 0 ? _g : null;
|
|
28857
|
-
this.
|
|
28922
|
+
this.globalVariableSearchQuery = (_h = v.globalVariableSearchQuery) !== null && _h !== void 0 ? _h : '';
|
|
28923
|
+
this.selectedGlobalVariableId = (_j = v.selectedGlobalVariableId) !== null && _j !== void 0 ? _j : null;
|
|
28924
|
+
this.runtimeValue = (_k = v.runtimeValue) !== null && _k !== void 0 ? _k : '';
|
|
28858
28925
|
}
|
|
28859
28926
|
/** Filtered parameters by scope and search (Parameter tab). */
|
|
28860
28927
|
get filteredParameters() {
|
|
@@ -28889,6 +28956,25 @@ class TestDataModalComponent {
|
|
|
28889
28956
|
showEdit: this.selectedParameterId === p.id,
|
|
28890
28957
|
}));
|
|
28891
28958
|
}
|
|
28959
|
+
/** Filtered global variables by search (Global Data tab). */
|
|
28960
|
+
get filteredGlobalVariables() {
|
|
28961
|
+
const q = this.globalVariableSearchQuery.trim().toLowerCase();
|
|
28962
|
+
if (!q) {
|
|
28963
|
+
return this.globalVariables;
|
|
28964
|
+
}
|
|
28965
|
+
return this.globalVariables.filter((g) => g.name.toLowerCase().includes(q) ||
|
|
28966
|
+
(g.value || '').toLowerCase().includes(q));
|
|
28967
|
+
}
|
|
28968
|
+
/** Global Data tab: list config (mirrors environment listing pattern). */
|
|
28969
|
+
get globalVariableListConfig() {
|
|
28970
|
+
return this.filteredGlobalVariables.map((g) => ({
|
|
28971
|
+
id: g.name,
|
|
28972
|
+
title: g.name,
|
|
28973
|
+
subtitle: g.value ? `Value: ${g.value}` : '',
|
|
28974
|
+
badge: 'Global',
|
|
28975
|
+
showEdit: false,
|
|
28976
|
+
}));
|
|
28977
|
+
}
|
|
28892
28978
|
/** Environment tab: list config for cqa-item-list. */
|
|
28893
28979
|
get environmentListConfig() {
|
|
28894
28980
|
return this.filteredEnvironments.map((e) => {
|
|
@@ -28924,6 +29010,7 @@ class TestDataModalComponent {
|
|
|
28924
29010
|
this.selectedParameterId = this.selectedParameterId === param.id ? null : param.id;
|
|
28925
29011
|
this.onEditFormFieldChange('selectedParameterId', this.selectedParameterId);
|
|
28926
29012
|
this.onEditFormFieldChange('value', param.name);
|
|
29013
|
+
this.clearSelectionsExcept('parameter');
|
|
28927
29014
|
}
|
|
28928
29015
|
}
|
|
28929
29016
|
/** Handle row click (select parameter). Edit button uses onParameterEditClick to avoid triggering this. */
|
|
@@ -28957,6 +29044,7 @@ class TestDataModalComponent {
|
|
|
28957
29044
|
this.selectedEnvironmentId === item.id ? null : item.id;
|
|
28958
29045
|
this.onEditFormFieldChange('selectedEnvironmentId', this.selectedEnvironmentId);
|
|
28959
29046
|
this.onEditFormFieldChange('value', item.name);
|
|
29047
|
+
this.clearSelectionsExcept('environment');
|
|
28960
29048
|
}
|
|
28961
29049
|
}
|
|
28962
29050
|
onEnvironmentEdit(itemId) {
|
|
@@ -28966,12 +29054,51 @@ class TestDataModalComponent {
|
|
|
28966
29054
|
event.preventDefault();
|
|
28967
29055
|
this.environmentCreate.emit();
|
|
28968
29056
|
}
|
|
29057
|
+
onGlobalVariableSearchInput(value) {
|
|
29058
|
+
this.onEditFormFieldChange('globalVariableSearchQuery', value);
|
|
29059
|
+
this.searchGlobalVariables.emit(value);
|
|
29060
|
+
}
|
|
29061
|
+
onGlobalVariableSelect(name) {
|
|
29062
|
+
const item = this.globalVariables.find((g) => g.name === name);
|
|
29063
|
+
if (item) {
|
|
29064
|
+
this.selectedGlobalVariableId =
|
|
29065
|
+
this.selectedGlobalVariableId === item.name ? null : item.name;
|
|
29066
|
+
this.onEditFormFieldChange('selectedGlobalVariableId', this.selectedGlobalVariableId);
|
|
29067
|
+
this.onEditFormFieldChange('value', item.name);
|
|
29068
|
+
this.clearSelectionsExcept('global');
|
|
29069
|
+
}
|
|
29070
|
+
}
|
|
28969
29071
|
/** Runtime tab: replace the runtime input with the selected suggestion. */
|
|
28970
29072
|
onRuntimeChipInsert(snippet) {
|
|
28971
29073
|
this.onEditFormFieldChange('runtimeValue', snippet);
|
|
29074
|
+
this.clearSelectionsExcept('runtime');
|
|
28972
29075
|
}
|
|
28973
|
-
|
|
29076
|
+
/**
|
|
29077
|
+
* When the user picks a value in any tab, the others' visual selection must
|
|
29078
|
+
* reset — the modal applies only the active tab's value, so keeping stale
|
|
29079
|
+
* highlights confuses which one will land on Apply.
|
|
29080
|
+
*/
|
|
29081
|
+
clearSelectionsExcept(keep) {
|
|
28974
29082
|
var _a, _b, _c, _d;
|
|
29083
|
+
if (keep !== 'parameter' && this.selectedParameterId !== null) {
|
|
29084
|
+
this.selectedParameterId = null;
|
|
29085
|
+
(_a = this.editForm.get('selectedParameterId')) === null || _a === void 0 ? void 0 : _a.setValue(null, { emitEvent: false });
|
|
29086
|
+
}
|
|
29087
|
+
if (keep !== 'environment' && this.selectedEnvironmentId !== null) {
|
|
29088
|
+
this.selectedEnvironmentId = null;
|
|
29089
|
+
(_b = this.editForm.get('selectedEnvironmentId')) === null || _b === void 0 ? void 0 : _b.setValue(null, { emitEvent: false });
|
|
29090
|
+
}
|
|
29091
|
+
if (keep !== 'global' && this.selectedGlobalVariableId !== null) {
|
|
29092
|
+
this.selectedGlobalVariableId = null;
|
|
29093
|
+
(_c = this.editForm.get('selectedGlobalVariableId')) === null || _c === void 0 ? void 0 : _c.setValue(null, { emitEvent: false });
|
|
29094
|
+
}
|
|
29095
|
+
if (keep !== 'runtime' && this.runtimeValue !== '') {
|
|
29096
|
+
this.runtimeValue = '';
|
|
29097
|
+
(_d = this.editForm.get('runtimeValue')) === null || _d === void 0 ? void 0 : _d.setValue('', { emitEvent: false });
|
|
29098
|
+
}
|
|
29099
|
+
}
|
|
29100
|
+
onApply() {
|
|
29101
|
+
var _a, _b, _c, _d, _e, _f;
|
|
28975
29102
|
this.syncStateFromForm();
|
|
28976
29103
|
let valueToApply = this.activeTab === 'runtime' ? this.runtimeValue : this.value;
|
|
28977
29104
|
if (this.activeTab === 'parameter') {
|
|
@@ -28980,6 +29107,11 @@ class TestDataModalComponent {
|
|
|
28980
29107
|
else if (this.activeTab === 'environment') {
|
|
28981
29108
|
valueToApply = this.selectedEnvironmentId ? (_d = (_c = this.environmentItems.find((e) => e.id === this.selectedEnvironmentId)) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '' : '';
|
|
28982
29109
|
}
|
|
29110
|
+
else if (this.activeTab === 'global') {
|
|
29111
|
+
valueToApply = this.selectedGlobalVariableId
|
|
29112
|
+
? (_f = (_e = this.globalVariables.find((g) => g.name === this.selectedGlobalVariableId)) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : ''
|
|
29113
|
+
: '';
|
|
29114
|
+
}
|
|
28983
29115
|
// Wrap valueToApply based on active tab
|
|
28984
29116
|
if (this.activeTab === 'parameter' && valueToApply) {
|
|
28985
29117
|
valueToApply = `@|${valueToApply}|`;
|
|
@@ -28990,6 +29122,9 @@ class TestDataModalComponent {
|
|
|
28990
29122
|
else if (this.activeTab === 'environment' && valueToApply) {
|
|
28991
29123
|
valueToApply = `*|${valueToApply}|`;
|
|
28992
29124
|
}
|
|
29125
|
+
else if (this.activeTab === 'global' && valueToApply) {
|
|
29126
|
+
valueToApply = `{{${valueToApply}}}`;
|
|
29127
|
+
}
|
|
28993
29128
|
// plain-text tab: no wrapping, use value as is
|
|
28994
29129
|
// Build result with only the active tab's data, clear other tabs' data
|
|
28995
29130
|
const result = {
|
|
@@ -29002,6 +29137,9 @@ class TestDataModalComponent {
|
|
|
29002
29137
|
// Only include environment data if environment tab is active
|
|
29003
29138
|
environmentSearchQuery: this.activeTab === 'environment' ? this.environmentSearchQuery : undefined,
|
|
29004
29139
|
selectedEnvironmentId: this.activeTab === 'environment' ? this.selectedEnvironmentId : undefined,
|
|
29140
|
+
// Only include global data if global tab is active
|
|
29141
|
+
globalVariableSearchQuery: this.activeTab === 'global' ? this.globalVariableSearchQuery : undefined,
|
|
29142
|
+
selectedGlobalVariableId: this.activeTab === 'global' ? this.selectedGlobalVariableId : undefined,
|
|
29005
29143
|
// Only include runtime data if runtime tab is active
|
|
29006
29144
|
runtimeValue: this.activeTab === 'runtime' ? this.runtimeValue : undefined,
|
|
29007
29145
|
};
|
|
@@ -29031,10 +29169,10 @@ class TestDataModalComponent {
|
|
|
29031
29169
|
}
|
|
29032
29170
|
}
|
|
29033
29171
|
TestDataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: TEST_DATA_MODAL_REF }, { token: TEST_DATA_MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
29034
|
-
TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, 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-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29172
|
+
TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", globalVariables: "globalVariables", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseTestDataId: "testCaseTestDataId", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit", searchGlobalVariables: "searchGlobalVariables" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, 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-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime' || activeTab === 'global'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Test Data Profile tab (legacy \"parameter\" key): Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Test Data Profile\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Global Data tab: workspace-scoped global variables (mirrors Environment listing) -->\n <ng-container *ngIf=\"activeTab === 'global'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Global Data\n </h3>\n </div>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search global variables'\"\n [value]=\"editForm.get('globalVariableSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search global variables'\"\n (valueChange)=\"onGlobalVariableSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <p *ngIf=\"isLoadingGlobalVariables\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n Loading global variables\u2026\n </p>\n <button\n *ngFor=\"let item of globalVariableListConfig\"\n type=\"button\"\n (click)=\"onGlobalVariableSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-solid]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedGlobalVariableId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"!isLoadingGlobalVariables && globalVariableListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No global variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29035
29173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, decorators: [{
|
|
29036
29174
|
type: Component,
|
|
29037
|
-
args: [{ selector: 'cqa-test-data-modal', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n" }]
|
|
29175
|
+
args: [{ selector: 'cqa-test-data-modal', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime' || activeTab === 'global'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Test Data Profile tab (legacy \"parameter\" key): Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Test Data Profile\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Global Data tab: workspace-scoped global variables (mirrors Environment listing) -->\n <ng-container *ngIf=\"activeTab === 'global'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Global Data\n </h3>\n </div>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search global variables'\"\n [value]=\"editForm.get('globalVariableSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search global variables'\"\n (valueChange)=\"onGlobalVariableSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <p *ngIf=\"isLoadingGlobalVariables\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n Loading global variables\u2026\n </p>\n <button\n *ngFor=\"let item of globalVariableListConfig\"\n type=\"button\"\n (click)=\"onGlobalVariableSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-solid]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedGlobalVariableId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"!isLoadingGlobalVariables && globalVariableListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No global variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n" }]
|
|
29038
29176
|
}], ctorParameters: function () {
|
|
29039
29177
|
return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: TestDataModalRef, decorators: [{
|
|
29040
29178
|
type: Inject,
|
|
@@ -29059,10 +29197,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
29059
29197
|
type: Output
|
|
29060
29198
|
}], environmentEdit: [{
|
|
29061
29199
|
type: Output
|
|
29200
|
+
}], searchGlobalVariables: [{
|
|
29201
|
+
type: Output
|
|
29062
29202
|
}], parameters: [{
|
|
29063
29203
|
type: Input
|
|
29064
29204
|
}], environmentItems: [{
|
|
29065
29205
|
type: Input
|
|
29206
|
+
}], globalVariables: [{
|
|
29207
|
+
type: Input
|
|
29208
|
+
}], isLoadingGlobalVariables: [{
|
|
29209
|
+
type: Input
|
|
29210
|
+
}], testCaseTestDataId: [{
|
|
29211
|
+
type: Input
|
|
29066
29212
|
}], activeTab: [{
|
|
29067
29213
|
type: Input
|
|
29068
29214
|
}], value: [{
|
|
@@ -38227,6 +38373,10 @@ class TemplateVariablesFormComponent {
|
|
|
38227
38373
|
this.hasMoreEnvironments = false;
|
|
38228
38374
|
/** True while parent is loading environments (search or load more) */
|
|
38229
38375
|
this.isLoadingEnvironments = false;
|
|
38376
|
+
/** Global Data variables (workspace-scoped) for the new Global Data tab */
|
|
38377
|
+
this.globalVariableOptions = [];
|
|
38378
|
+
/** True while parent is loading global variables */
|
|
38379
|
+
this.isLoadingGlobalVariables = false;
|
|
38230
38380
|
/** True when the edited step is inside a FOR loop. */
|
|
38231
38381
|
this.isInsideForLoopStep = false;
|
|
38232
38382
|
/** True when the parent test case has a test data profile configured (testCase.testDataId is set). */
|
|
@@ -38250,6 +38400,7 @@ class TemplateVariablesFormComponent {
|
|
|
38250
38400
|
this.loadMoreUploads = new EventEmitter(); // Emit when user scrolls to load more uploads
|
|
38251
38401
|
this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
|
|
38252
38402
|
this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
|
|
38403
|
+
this.searchGlobalVariables = new EventEmitter(); // Emit when user searches global variables
|
|
38253
38404
|
this.cancelElementForm = new EventEmitter(); // Emit when element form is cancelled
|
|
38254
38405
|
this.elementFormVisibilityChange = new EventEmitter(); // Emit when element form visibility changes
|
|
38255
38406
|
// Cache for select configs to avoid recalculating on every change detection
|
|
@@ -38262,6 +38413,11 @@ class TemplateVariablesFormComponent {
|
|
|
38262
38413
|
this.environmentSelectConfigCache = new Map();
|
|
38263
38414
|
// Cache for environment parameter select configs
|
|
38264
38415
|
this.environmentParameterSelectConfigCache = new Map();
|
|
38416
|
+
// Cache for global-variable select configs. Without this, the template's
|
|
38417
|
+
// `[config]="getGlobalVariableSelectConfig(...)"` allocates a new config
|
|
38418
|
+
// every CD pass — cqa-dynamic-select sees the new reference and triggers
|
|
38419
|
+
// another CD, pegging the tab at 100% CPU.
|
|
38420
|
+
this.globalVariableSelectConfigCache = new Map();
|
|
38265
38421
|
// Cache for screen name select configs (for element variables)
|
|
38266
38422
|
this.screenNameSelectConfigCache = new Map();
|
|
38267
38423
|
// Cache for element select configs (filtered by screen name)
|
|
@@ -38288,18 +38444,46 @@ class TemplateVariablesFormComponent {
|
|
|
38288
38444
|
this.needsDataTypeDropdownCache = new Map();
|
|
38289
38445
|
this.shouldShowDropdownCache = new Map();
|
|
38290
38446
|
// Pre-computed data type options (static, no need to recreate)
|
|
38447
|
+
// Order matches the design: Plain Text · Run Time · Env Variable · Global Data · Test Data Profile
|
|
38291
38448
|
this.dataTypeOptions = [
|
|
38292
38449
|
{ id: 'plain-text', value: 'plain-text', name: 'Plain Text', label: 'Plain Text' },
|
|
38293
|
-
{ id: '
|
|
38294
|
-
{ id: '
|
|
38295
|
-
{ id: '
|
|
38450
|
+
{ id: 'runtime', value: 'runtime', name: 'Run Time Variable', label: 'Run Time Variable' },
|
|
38451
|
+
{ id: 'environment', value: 'environment', name: 'Environment Variable', label: 'Environment Variable' },
|
|
38452
|
+
{ id: 'global', value: 'global', name: 'Global Data', label: 'Global Data' },
|
|
38453
|
+
{ id: 'parameter', value: 'parameter', name: 'Test Data Profile', label: 'Test Data Profile' }
|
|
38454
|
+
];
|
|
38455
|
+
/**
|
|
38456
|
+
* Stable segment options for the Value Source segment strip. MUST be a field
|
|
38457
|
+
* (not a getter) — see feedback_segment_control_no_getter_input.md: a getter
|
|
38458
|
+
* triggers a CD loop in cqa-segment-control.
|
|
38459
|
+
*/
|
|
38460
|
+
this.dataTypeSegments = [
|
|
38461
|
+
{ value: 'plain-text', label: 'Plain Text' },
|
|
38462
|
+
{ value: 'runtime', label: 'Run Time Variable' },
|
|
38463
|
+
{ value: 'environment', label: 'Environment Variable' },
|
|
38464
|
+
{ value: 'global', label: 'Global Data' },
|
|
38465
|
+
{ value: 'parameter', label: 'Test Data Profile' },
|
|
38296
38466
|
];
|
|
38467
|
+
/**
|
|
38468
|
+
* Memoized filtered segments — drops Test Data Profile when neither TC nor FOR loop has a TDP.
|
|
38469
|
+
* Held as a field (not a getter) so cqa-segment-control's [segments] stays a stable reference.
|
|
38470
|
+
* Recomputed in ngOnChanges when isInsideForLoopStep / hasTestDataProfile change.
|
|
38471
|
+
*/
|
|
38472
|
+
this.visibleDataTypeSegments = this.dataTypeSegments;
|
|
38297
38473
|
this.createElementVisible = false;
|
|
38298
38474
|
// Tracks active variable-syntax errors by variable name. The validator below
|
|
38299
38475
|
// reads from this map so errors survive control re-validation on setValue().
|
|
38300
38476
|
this.variableSyntaxErrors = new Map();
|
|
38301
38477
|
this.controlsWithSyntaxValidator = new WeakSet();
|
|
38302
38478
|
}
|
|
38479
|
+
recomputeVisibleSegments() {
|
|
38480
|
+
if (!this.isInsideForLoopStep && !this.hasTestDataProfile) {
|
|
38481
|
+
this.visibleDataTypeSegments = this.dataTypeSegments.filter(s => s.value !== 'parameter');
|
|
38482
|
+
}
|
|
38483
|
+
else {
|
|
38484
|
+
this.visibleDataTypeSegments = this.dataTypeSegments;
|
|
38485
|
+
}
|
|
38486
|
+
}
|
|
38303
38487
|
onCreateElement(payload) {
|
|
38304
38488
|
this.createElement.emit(payload);
|
|
38305
38489
|
this.elementFormVisibilityChange.emit(false);
|
|
@@ -38328,10 +38512,12 @@ class TemplateVariablesFormComponent {
|
|
|
38328
38512
|
changes['hasMoreElements'] || changes['isLoadingElements'] ||
|
|
38329
38513
|
changes['parameterOptions'] || changes['hasMoreParameters'] || changes['isLoadingParameters'] ||
|
|
38330
38514
|
changes['environmentOptions'] || changes['hasMoreEnvironments'] || changes['isLoadingEnvironments'] ||
|
|
38515
|
+
changes['globalVariableOptions'] || changes['isLoadingGlobalVariables'] || changes['testCaseEnvironmentName'] ||
|
|
38331
38516
|
changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex'] || changes['defaultTestDataEndIndex'] || changes['isInsideForLoopStep'] || changes['hasTestDataProfile']) {
|
|
38332
38517
|
// Drop dataType option cache so dropdown options are re-filtered on input change.
|
|
38333
38518
|
if (changes['isInsideForLoopStep'] || changes['hasTestDataProfile']) {
|
|
38334
38519
|
this.dataTypeSelectConfigCache.clear();
|
|
38520
|
+
this.recomputeVisibleSegments();
|
|
38335
38521
|
}
|
|
38336
38522
|
// Only clear caches for changed inputs, not all caches
|
|
38337
38523
|
if (changes['templateVariables'] || changes['variablesForm']) {
|
|
@@ -38341,6 +38527,7 @@ class TemplateVariablesFormComponent {
|
|
|
38341
38527
|
this.parameterSelectConfigCache.clear();
|
|
38342
38528
|
this.environmentSelectConfigCache.clear();
|
|
38343
38529
|
this.environmentParameterSelectConfigCache.clear();
|
|
38530
|
+
this.globalVariableSelectConfigCache.clear();
|
|
38344
38531
|
this.selectedEnvironmentOptionsSnapshot.clear();
|
|
38345
38532
|
this.selectedParameterProfileSnapshot.clear();
|
|
38346
38533
|
this.screenNameSelectConfigCache.clear();
|
|
@@ -38399,6 +38586,36 @@ class TemplateVariablesFormComponent {
|
|
|
38399
38586
|
this.environmentParameterSelectConfigCache.clear();
|
|
38400
38587
|
}
|
|
38401
38588
|
}
|
|
38589
|
+
// testCaseEnvironmentName arrives asynchronously (parent resolves env name
|
|
38590
|
+
// via environmentService.show). When it lands, drop the env caches so the
|
|
38591
|
+
// auto-default seed in getEnvironmentSelectConfig runs once and the
|
|
38592
|
+
// "Environment Name" dropdown pre-selects the test case's env instead of
|
|
38593
|
+
// showing the "Select Environment" placeholder.
|
|
38594
|
+
if (changes['testCaseEnvironmentName']) {
|
|
38595
|
+
this.environmentSelectConfigCache.clear();
|
|
38596
|
+
this.environmentParameterSelectConfigCache.clear();
|
|
38597
|
+
}
|
|
38598
|
+
// Global Data dropdown's options/loading state changed — drop the global
|
|
38599
|
+
// config cache so the next render rebuilds with the fresh list.
|
|
38600
|
+
if (changes['globalVariableOptions'] || changes['isLoadingGlobalVariables']) {
|
|
38601
|
+
this.globalVariableSelectConfigCache.clear();
|
|
38602
|
+
}
|
|
38603
|
+
// When globalVariableOptions arrive (or change) after templateVariables are loaded,
|
|
38604
|
+
// backfill selectedGlobalVariableId on any global-type variable that has a name but
|
|
38605
|
+
// still lacks the numeric id (the lookup couldn't run during initial init because
|
|
38606
|
+
// options were empty).
|
|
38607
|
+
if (changes['globalVariableOptions'] && this.templateVariables) {
|
|
38608
|
+
this.backfillGlobalVariableIds();
|
|
38609
|
+
}
|
|
38610
|
+
// Proactively seed env-type variables with the test case's environment.
|
|
38611
|
+
// Runs whenever any input that could unlock the seed changes — relying on
|
|
38612
|
+
// a lazy seed inside getEnvironmentSelectConfig misses the case where the
|
|
38613
|
+
// segment is clicked before environmentOptions / testCaseEnvironmentName
|
|
38614
|
+
// both arrive.
|
|
38615
|
+
if (changes['templateVariables'] || changes['environmentOptions'] ||
|
|
38616
|
+
changes['testCaseEnvironmentName']) {
|
|
38617
|
+
this.seedDefaultEnvironmentForVariables();
|
|
38618
|
+
}
|
|
38402
38619
|
// Initialize data types and raw values for test-data variables
|
|
38403
38620
|
// NOTE: We do NOT include 'parameterOptions' here because it changes on every search,
|
|
38404
38621
|
// which would reset the test-data type dropdown. Instead, parameterOptions initialization
|
|
@@ -38668,9 +38885,30 @@ class TemplateVariablesFormComponent {
|
|
|
38668
38885
|
this.cdr.markForCheck();
|
|
38669
38886
|
}
|
|
38670
38887
|
}
|
|
38888
|
+
backfillGlobalVariableIds() {
|
|
38889
|
+
if (!this.templateVariables || !this.templateVariables.length)
|
|
38890
|
+
return;
|
|
38891
|
+
const opts = this.globalVariableOptions || [];
|
|
38892
|
+
if (!opts.length)
|
|
38893
|
+
return;
|
|
38894
|
+
this.templateVariables.forEach(variable => {
|
|
38895
|
+
if (variable.dataType !== 'global')
|
|
38896
|
+
return;
|
|
38897
|
+
if (variable.selectedGlobalVariableId != null)
|
|
38898
|
+
return;
|
|
38899
|
+
const name = (variable.selectedGlobalVariable && variable.selectedGlobalVariable.trim())
|
|
38900
|
+
|| (variable.rawValue ? String(variable.rawValue).trim() : '');
|
|
38901
|
+
if (!name)
|
|
38902
|
+
return;
|
|
38903
|
+
const matched = opts.find(g => g.name === name);
|
|
38904
|
+
if (matched && matched.id != null && !isNaN(Number(matched.id))) {
|
|
38905
|
+
variable.selectedGlobalVariableId = Number(matched.id);
|
|
38906
|
+
}
|
|
38907
|
+
});
|
|
38908
|
+
}
|
|
38671
38909
|
initializeTestDataVariables() {
|
|
38672
38910
|
this.templateVariables.forEach((variable, index) => {
|
|
38673
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
38911
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
|
|
38674
38912
|
if (this.needsDataTypeDropdown(variable)) {
|
|
38675
38913
|
// Preserve existing dataType if already set (e.g., from setTemplateVariables when loading saved step)
|
|
38676
38914
|
const existingDataType = variable.dataType;
|
|
@@ -38914,6 +39152,31 @@ class TemplateVariablesFormComponent {
|
|
|
38914
39152
|
}
|
|
38915
39153
|
}
|
|
38916
39154
|
}
|
|
39155
|
+
// For global type, rehydrate selectedGlobalVariable + selectedGlobalVariableId from
|
|
39156
|
+
// the parsed `{{name}}` value by looking the option up in globalVariableOptions.
|
|
39157
|
+
if (finalDataType === 'global') {
|
|
39158
|
+
const globalName = (variable.selectedGlobalVariable && variable.selectedGlobalVariable.trim())
|
|
39159
|
+
|| (rawValue ? String(rawValue).trim() : '');
|
|
39160
|
+
if (globalName) {
|
|
39161
|
+
variable.selectedGlobalVariable = globalName;
|
|
39162
|
+
if (!variableGroup.get('selectedGlobalVariable')) {
|
|
39163
|
+
variableGroup.addControl('selectedGlobalVariable', new FormControl(globalName));
|
|
39164
|
+
}
|
|
39165
|
+
else {
|
|
39166
|
+
(_m = variableGroup.get('selectedGlobalVariable')) === null || _m === void 0 ? void 0 : _m.setValue(globalName, { emitEvent: false });
|
|
39167
|
+
}
|
|
39168
|
+
if (variable.selectedGlobalVariableId == null && (this.globalVariableOptions || []).length > 0) {
|
|
39169
|
+
const matched = (this.globalVariableOptions || []).find(g => g.name === globalName);
|
|
39170
|
+
if (matched && matched.id != null && !isNaN(Number(matched.id))) {
|
|
39171
|
+
variable.selectedGlobalVariableId = Number(matched.id);
|
|
39172
|
+
}
|
|
39173
|
+
}
|
|
39174
|
+
if (variableGroup.get('value')) {
|
|
39175
|
+
(_o = variableGroup.get('value')) === null || _o === void 0 ? void 0 : _o.setValue(`{{${globalName}}}`, { emitEvent: false });
|
|
39176
|
+
}
|
|
39177
|
+
variable.value = this.formatTestDataValue(globalName, 'global');
|
|
39178
|
+
}
|
|
39179
|
+
}
|
|
38917
39180
|
// For environment type, use finalDataType (from testDataList) — value may not parse as *|...| yet.
|
|
38918
39181
|
if (finalDataType === 'environment') {
|
|
38919
39182
|
const parsedEnv = this.parseTestDataValue(variable.value || '');
|
|
@@ -38951,10 +39214,10 @@ class TemplateVariablesFormComponent {
|
|
|
38951
39214
|
variableGroup.addControl('selectedEnvironment', new FormControl(envOption.environment));
|
|
38952
39215
|
}
|
|
38953
39216
|
else {
|
|
38954
|
-
(
|
|
39217
|
+
(_p = variableGroup.get('selectedEnvironment')) === null || _p === void 0 ? void 0 : _p.setValue(envOption.environment, { emitEvent: false });
|
|
38955
39218
|
}
|
|
38956
39219
|
if (variableGroup.get('value')) {
|
|
38957
|
-
(
|
|
39220
|
+
(_q = variableGroup.get('value')) === null || _q === void 0 ? void 0 : _q.setValue(`*|${paramName}|`, { emitEvent: false });
|
|
38958
39221
|
}
|
|
38959
39222
|
}
|
|
38960
39223
|
}
|
|
@@ -38976,13 +39239,13 @@ class TemplateVariablesFormComponent {
|
|
|
38976
39239
|
variableGroup.addControl('selectedEnvironment', new FormControl(first.environment));
|
|
38977
39240
|
}
|
|
38978
39241
|
else {
|
|
38979
|
-
(
|
|
39242
|
+
(_r = variableGroup.get('selectedEnvironment')) === null || _r === void 0 ? void 0 : _r.setValue(first.environment, { emitEvent: false });
|
|
38980
39243
|
}
|
|
38981
39244
|
if (!paramName && forEnv.length === 1 && first.name) {
|
|
38982
39245
|
const onlyParam = String(first.name).trim();
|
|
38983
39246
|
if (onlyParam) {
|
|
38984
39247
|
if (variableGroup.get('value')) {
|
|
38985
|
-
(
|
|
39248
|
+
(_s = variableGroup.get('value')) === null || _s === void 0 ? void 0 : _s.setValue(`*|${onlyParam}|`, { emitEvent: false });
|
|
38986
39249
|
}
|
|
38987
39250
|
variable.value = this.formatTestDataValue(onlyParam, 'environment');
|
|
38988
39251
|
}
|
|
@@ -39014,7 +39277,7 @@ class TemplateVariablesFormComponent {
|
|
|
39014
39277
|
// Prefer screenNameObj.name; fall back to screenNameOptions lookup when screenNameObj
|
|
39015
39278
|
// is absent (e.g. elements returned by findAll() may lack the nested object).
|
|
39016
39279
|
if (!variable.selectedScreenName) {
|
|
39017
|
-
if ((
|
|
39280
|
+
if ((_t = element.screenNameObj) === null || _t === void 0 ? void 0 : _t.name) {
|
|
39018
39281
|
variable.selectedScreenName = element.screenNameObj.name;
|
|
39019
39282
|
}
|
|
39020
39283
|
else {
|
|
@@ -39033,10 +39296,10 @@ class TemplateVariablesFormComponent {
|
|
|
39033
39296
|
else {
|
|
39034
39297
|
// Only update if form control doesn't already have a valid screen name selected
|
|
39035
39298
|
// This prevents resetting user's selection when elementOptions changes
|
|
39036
|
-
const currentValue = (
|
|
39299
|
+
const currentValue = (_u = variableGroup.get('selectedScreenName')) === null || _u === void 0 ? void 0 : _u.value;
|
|
39037
39300
|
const currentValueStr = currentValue != null ? String(currentValue) : null;
|
|
39038
39301
|
if (currentValueStr !== screenNameIdString && currentValueStr !== 'none') {
|
|
39039
|
-
(
|
|
39302
|
+
(_v = variableGroup.get('selectedScreenName')) === null || _v === void 0 ? void 0 : _v.setValue(screenNameIdString, { emitEvent: false });
|
|
39040
39303
|
}
|
|
39041
39304
|
}
|
|
39042
39305
|
}
|
|
@@ -39059,11 +39322,11 @@ class TemplateVariablesFormComponent {
|
|
|
39059
39322
|
variableGroup.addControl('id', new FormControl(element.id));
|
|
39060
39323
|
}
|
|
39061
39324
|
else {
|
|
39062
|
-
(
|
|
39325
|
+
(_w = variableGroup.get('id')) === null || _w === void 0 ? void 0 : _w.setValue(element.id, { emitEvent: false });
|
|
39063
39326
|
}
|
|
39064
39327
|
// Update value form control
|
|
39065
39328
|
if (variableGroup.get('value')) {
|
|
39066
|
-
(
|
|
39329
|
+
(_x = variableGroup.get('value')) === null || _x === void 0 ? void 0 : _x.setValue(variable.value, { emitEvent: false });
|
|
39067
39330
|
}
|
|
39068
39331
|
}
|
|
39069
39332
|
else {
|
|
@@ -39082,7 +39345,7 @@ class TemplateVariablesFormComponent {
|
|
|
39082
39345
|
variable.elementName = undefined;
|
|
39083
39346
|
// Only clear screenNameId if it wasn't set by user selection
|
|
39084
39347
|
// Check if form control has a valid screen name (not 'none')
|
|
39085
|
-
const currentScreenNameValue = (
|
|
39348
|
+
const currentScreenNameValue = (_y = variableGroup.get('selectedScreenName')) === null || _y === void 0 ? void 0 : _y.value;
|
|
39086
39349
|
if (!currentScreenNameValue || currentScreenNameValue === 'none' || currentScreenNameValue === null) {
|
|
39087
39350
|
variable.screenNameId = undefined;
|
|
39088
39351
|
variable.selectedScreenName = undefined;
|
|
@@ -39092,7 +39355,7 @@ class TemplateVariablesFormComponent {
|
|
|
39092
39355
|
variableGroup.addControl('selectedScreenName', new FormControl('none'));
|
|
39093
39356
|
}
|
|
39094
39357
|
else {
|
|
39095
|
-
(
|
|
39358
|
+
(_z = variableGroup.get('selectedScreenName')) === null || _z === void 0 ? void 0 : _z.setValue('none', { emitEvent: false });
|
|
39096
39359
|
}
|
|
39097
39360
|
}
|
|
39098
39361
|
// Element ID should be null
|
|
@@ -39100,7 +39363,7 @@ class TemplateVariablesFormComponent {
|
|
|
39100
39363
|
variableGroup.addControl('id', new FormControl(null));
|
|
39101
39364
|
}
|
|
39102
39365
|
else {
|
|
39103
|
-
(
|
|
39366
|
+
(_0 = variableGroup.get('id')) === null || _0 === void 0 ? void 0 : _0.setValue(null, { emitEvent: false });
|
|
39104
39367
|
}
|
|
39105
39368
|
}
|
|
39106
39369
|
}
|
|
@@ -39172,22 +39435,23 @@ class TemplateVariablesFormComponent {
|
|
|
39172
39435
|
if (!value || typeof value !== 'string') {
|
|
39173
39436
|
return { dataType: 'plain-text', rawValue: '' };
|
|
39174
39437
|
}
|
|
39175
|
-
//
|
|
39438
|
+
// Global Data: `{{name}}` (new format — no leading `$`).
|
|
39439
|
+
if (value.startsWith('{{') && value.endsWith('}}')) {
|
|
39440
|
+
return { dataType: 'global', rawValue: value.slice(2, -2) };
|
|
39441
|
+
}
|
|
39442
|
+
// Parameter: @|name|
|
|
39176
39443
|
if (value.startsWith('@|') && value.endsWith('|')) {
|
|
39177
39444
|
return { dataType: 'parameter', rawValue: value.slice(2, -1) };
|
|
39178
39445
|
}
|
|
39179
|
-
//
|
|
39180
|
-
|
|
39446
|
+
// Runtime: $|name|
|
|
39447
|
+
if (value.startsWith('$|') && value.endsWith('|')) {
|
|
39181
39448
|
return { dataType: 'runtime', rawValue: value.slice(2, -1) };
|
|
39182
39449
|
}
|
|
39183
|
-
//
|
|
39184
|
-
|
|
39450
|
+
// Environment: *|name|
|
|
39451
|
+
if (value.startsWith('*|') && value.endsWith('|')) {
|
|
39185
39452
|
return { dataType: 'environment', rawValue: value.slice(2, -1) };
|
|
39186
39453
|
}
|
|
39187
|
-
|
|
39188
|
-
else {
|
|
39189
|
-
return { dataType: 'plain-text', rawValue: value };
|
|
39190
|
-
}
|
|
39454
|
+
return { dataType: 'plain-text', rawValue: value };
|
|
39191
39455
|
}
|
|
39192
39456
|
formatTestDataValue(rawValue, dataType) {
|
|
39193
39457
|
if (!rawValue) {
|
|
@@ -39200,6 +39464,8 @@ class TemplateVariablesFormComponent {
|
|
|
39200
39464
|
return `$|${rawValue}|`;
|
|
39201
39465
|
case 'environment':
|
|
39202
39466
|
return `*|${rawValue}|`;
|
|
39467
|
+
case 'global':
|
|
39468
|
+
return `{{${rawValue}}}`;
|
|
39203
39469
|
case 'plain-text':
|
|
39204
39470
|
default:
|
|
39205
39471
|
return rawValue;
|
|
@@ -39429,6 +39695,65 @@ class TemplateVariablesFormComponent {
|
|
|
39429
39695
|
getCurrentDataType(variable) {
|
|
39430
39696
|
return variable.dataType || 'plain-text';
|
|
39431
39697
|
}
|
|
39698
|
+
/** Whether the variable is currently using the Global Data tab. */
|
|
39699
|
+
isGlobalType(variable) {
|
|
39700
|
+
return (variable.dataType || 'plain-text') === 'global';
|
|
39701
|
+
}
|
|
39702
|
+
/** Whether the user has picked a global variable on this row. */
|
|
39703
|
+
hasSelectedGlobalVariable(variable) {
|
|
39704
|
+
return !!variable.selectedGlobalVariable;
|
|
39705
|
+
}
|
|
39706
|
+
/**
|
|
39707
|
+
* Build select config for the Global Data dropdown.
|
|
39708
|
+
* Each row inserts `{{name}}` on selection.
|
|
39709
|
+
*/
|
|
39710
|
+
getGlobalVariableSelectConfig(variable, index) {
|
|
39711
|
+
const cacheKey = `${variable.name}_globalVariable`;
|
|
39712
|
+
const cached = this.globalVariableSelectConfigCache.get(cacheKey);
|
|
39713
|
+
if (cached) {
|
|
39714
|
+
return cached;
|
|
39715
|
+
}
|
|
39716
|
+
const variableGroup = this.getVariableFormGroup(variable.name);
|
|
39717
|
+
if (variableGroup && !variableGroup.get('selectedGlobalVariable')) {
|
|
39718
|
+
variableGroup.addControl('selectedGlobalVariable', new FormControl(variable.selectedGlobalVariable || ''));
|
|
39719
|
+
}
|
|
39720
|
+
const options = (this.globalVariableOptions || []).map(g => ({
|
|
39721
|
+
id: g.name,
|
|
39722
|
+
value: g.name,
|
|
39723
|
+
name: g.name,
|
|
39724
|
+
label: g.name,
|
|
39725
|
+
}));
|
|
39726
|
+
const config = {
|
|
39727
|
+
key: 'selectedGlobalVariable',
|
|
39728
|
+
placeholder: 'Search global variable',
|
|
39729
|
+
multiple: false,
|
|
39730
|
+
searchable: true,
|
|
39731
|
+
serverSearch: true,
|
|
39732
|
+
isLoading: this.isLoadingGlobalVariables,
|
|
39733
|
+
options,
|
|
39734
|
+
onSearch: (query) => this.searchGlobalVariables.emit(query),
|
|
39735
|
+
onChange: (value) => {
|
|
39736
|
+
var _a;
|
|
39737
|
+
const name = value != null ? String(value) : '';
|
|
39738
|
+
const matched = (this.globalVariableOptions || []).find(g => g.name === name);
|
|
39739
|
+
const numericId = matched && matched.id != null && !isNaN(Number(matched.id))
|
|
39740
|
+
? Number(matched.id)
|
|
39741
|
+
: undefined;
|
|
39742
|
+
variable.selectedGlobalVariable = name;
|
|
39743
|
+
variable.selectedGlobalVariableId = numericId;
|
|
39744
|
+
variable.rawValue = name;
|
|
39745
|
+
const formatted = this.formatTestDataValue(name, 'global');
|
|
39746
|
+
variable.value = formatted;
|
|
39747
|
+
const grp = this.getVariableFormGroup(variable.name);
|
|
39748
|
+
if (grp === null || grp === void 0 ? void 0 : grp.get('value'))
|
|
39749
|
+
(_a = grp.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(formatted, { emitEvent: false });
|
|
39750
|
+
this.variableValueChange.emit({ name: variable.name, value: formatted });
|
|
39751
|
+
this.cdr.markForCheck();
|
|
39752
|
+
},
|
|
39753
|
+
};
|
|
39754
|
+
this.globalVariableSelectConfigCache.set(cacheKey, config);
|
|
39755
|
+
return config;
|
|
39756
|
+
}
|
|
39432
39757
|
getRawValue(variable) {
|
|
39433
39758
|
return variable.rawValue || '';
|
|
39434
39759
|
}
|
|
@@ -39474,6 +39799,15 @@ class TemplateVariablesFormComponent {
|
|
|
39474
39799
|
return;
|
|
39475
39800
|
// Update stored data type on the variable object
|
|
39476
39801
|
variable.dataType = dataType;
|
|
39802
|
+
// Clear global-tab state if leaving the global tab.
|
|
39803
|
+
if (dataType !== 'global') {
|
|
39804
|
+
variable.selectedGlobalVariable = undefined;
|
|
39805
|
+
variable.selectedGlobalVariableId = undefined;
|
|
39806
|
+
const grp = this.getVariableFormGroup(variableName);
|
|
39807
|
+
if (grp === null || grp === void 0 ? void 0 : grp.get('selectedGlobalVariable')) {
|
|
39808
|
+
(_a = grp.get('selectedGlobalVariable')) === null || _a === void 0 ? void 0 : _a.setValue('', { emitEvent: false });
|
|
39809
|
+
}
|
|
39810
|
+
}
|
|
39477
39811
|
// Clear parameter and environment select config caches since data type changed
|
|
39478
39812
|
this.testDataProfileSelectConfigCache.delete(`${variableName}_testDataProfile`);
|
|
39479
39813
|
this.dataSetSelectConfigCache.delete(`${variableName}_dataSet`);
|
|
@@ -39522,16 +39856,16 @@ class TemplateVariablesFormComponent {
|
|
|
39522
39856
|
// Clear form controls if they exist
|
|
39523
39857
|
if (variableGroup) {
|
|
39524
39858
|
if (variableGroup.get('selectedTestDataProfile')) {
|
|
39525
|
-
(
|
|
39859
|
+
(_b = variableGroup.get('selectedTestDataProfile')) === null || _b === void 0 ? void 0 : _b.setValue('', { emitEvent: false });
|
|
39526
39860
|
}
|
|
39527
39861
|
if (variableGroup.get('selectedDataSet')) {
|
|
39528
|
-
(
|
|
39862
|
+
(_c = variableGroup.get('selectedDataSet')) === null || _c === void 0 ? void 0 : _c.setValue('', { emitEvent: false });
|
|
39529
39863
|
}
|
|
39530
39864
|
if (variableGroup.get('selectedDataSetStart')) {
|
|
39531
|
-
(
|
|
39865
|
+
(_d = variableGroup.get('selectedDataSetStart')) === null || _d === void 0 ? void 0 : _d.setValue('', { emitEvent: false });
|
|
39532
39866
|
}
|
|
39533
39867
|
if (variableGroup.get('selectedDataSetEnd')) {
|
|
39534
|
-
(
|
|
39868
|
+
(_e = variableGroup.get('selectedDataSetEnd')) === null || _e === void 0 ? void 0 : _e.setValue('', { emitEvent: false });
|
|
39535
39869
|
}
|
|
39536
39870
|
}
|
|
39537
39871
|
}
|
|
@@ -39555,13 +39889,20 @@ class TemplateVariablesFormComponent {
|
|
|
39555
39889
|
if (variableGroup) {
|
|
39556
39890
|
if (variableGroup.get('value')) {
|
|
39557
39891
|
// For all types, start with empty value when switching
|
|
39558
|
-
(
|
|
39559
|
-
// For environment type, also clear selectedEnvironment
|
|
39560
|
-
if (dataType === 'environment' && variableGroup.get('selectedEnvironment')) {
|
|
39561
|
-
(_f = variableGroup.get('selectedEnvironment')) === null || _f === void 0 ? void 0 : _f.setValue('', { emitEvent: false });
|
|
39562
|
-
}
|
|
39892
|
+
(_f = variableGroup.get('value')) === null || _f === void 0 ? void 0 : _f.setValue('', { emitEvent: false });
|
|
39563
39893
|
}
|
|
39564
39894
|
}
|
|
39895
|
+
// Env-on-test-case: when the user picks the "Environment Variable" segment,
|
|
39896
|
+
// pre-select the test case's env via the shared seed helper. Runs outside
|
|
39897
|
+
// the `variableGroup.get('value')` guard so it works even when the value
|
|
39898
|
+
// control hasn't been added yet for this variable.
|
|
39899
|
+
if (dataType === 'environment') {
|
|
39900
|
+
// Mark the variable as env-type so the seed pass picks it up.
|
|
39901
|
+
variable.dataType = 'environment';
|
|
39902
|
+
this.environmentSelectConfigCache.delete(`${variable.name}_environment`);
|
|
39903
|
+
this.environmentParameterSelectConfigCache.delete(`${variable.name}_envParam`);
|
|
39904
|
+
this.seedDefaultEnvironmentForVariables();
|
|
39905
|
+
}
|
|
39565
39906
|
// If switching to parameter type, check for default values and initialize them
|
|
39566
39907
|
if (dataType === 'parameter') {
|
|
39567
39908
|
const index = this.templateVariables.indexOf(variable);
|
|
@@ -40256,6 +40597,67 @@ class TemplateVariablesFormComponent {
|
|
|
40256
40597
|
this.parameterForDataSetSelectConfigCache.set(cacheKey, config);
|
|
40257
40598
|
return config;
|
|
40258
40599
|
}
|
|
40600
|
+
/**
|
|
40601
|
+
* Env-on-test-case contract: a test case has exactly one environment, so the
|
|
40602
|
+
* "Environment Name" dropdown has nothing meaningful to choose from. We trust
|
|
40603
|
+
* `testCaseEnvironmentName` as the source of truth — even if it's not in the
|
|
40604
|
+
* loaded `environmentOptions` yet (those are async, env-scoped, and may be
|
|
40605
|
+
* empty when the env has no parameters). The dropdown's `optionsArray.unshift`
|
|
40606
|
+
* fallback in `getEnvironmentSelectConfig` ensures the value renders even when
|
|
40607
|
+
* missing from the option list.
|
|
40608
|
+
*/
|
|
40609
|
+
resolveDefaultEnvironmentName() {
|
|
40610
|
+
var _a;
|
|
40611
|
+
const tcName = ((_a = this.testCaseEnvironmentName) !== null && _a !== void 0 ? _a : '').trim();
|
|
40612
|
+
if (tcName) {
|
|
40613
|
+
return tcName;
|
|
40614
|
+
}
|
|
40615
|
+
const unique = this.getUniqueEnvironments();
|
|
40616
|
+
return unique.length === 1 ? unique[0].name : '';
|
|
40617
|
+
}
|
|
40618
|
+
/**
|
|
40619
|
+
* Proactive companion to `resolveDefaultEnvironmentName`: walks every env-type
|
|
40620
|
+
* template variable that hasn't been seeded yet and pre-fills its
|
|
40621
|
+
* `selectedEnvironment` (plus the matching form control) with the test case's
|
|
40622
|
+
* environment. Idempotent — variables that already have a selection are
|
|
40623
|
+
* skipped. Called from `ngOnChanges` whenever the inputs that could unlock the
|
|
40624
|
+
* seed (`testCaseEnvironmentName`, `environmentOptions`, `templateVariables`)
|
|
40625
|
+
* change.
|
|
40626
|
+
*/
|
|
40627
|
+
seedDefaultEnvironmentForVariables() {
|
|
40628
|
+
var _a;
|
|
40629
|
+
const auto = this.resolveDefaultEnvironmentName();
|
|
40630
|
+
if (!auto) {
|
|
40631
|
+
return;
|
|
40632
|
+
}
|
|
40633
|
+
for (const variable of (_a = this.templateVariables) !== null && _a !== void 0 ? _a : []) {
|
|
40634
|
+
if (!this.isEnvironmentType(variable)) {
|
|
40635
|
+
continue;
|
|
40636
|
+
}
|
|
40637
|
+
if (variable.selectedEnvironment) {
|
|
40638
|
+
continue;
|
|
40639
|
+
}
|
|
40640
|
+
variable.selectedEnvironment = auto;
|
|
40641
|
+
const envOption = this.environmentOptions.find(env => env.environment === auto);
|
|
40642
|
+
if (envOption) {
|
|
40643
|
+
const idMatch = envOption.id.match(/env-(\d+)-/);
|
|
40644
|
+
if (idMatch && idMatch[1]) {
|
|
40645
|
+
variable.selectedEnvironmentId = parseInt(idMatch[1], 10);
|
|
40646
|
+
}
|
|
40647
|
+
}
|
|
40648
|
+
const grp = this.getVariableFormGroup(variable.name);
|
|
40649
|
+
if (grp) {
|
|
40650
|
+
if (!grp.get('selectedEnvironment')) {
|
|
40651
|
+
grp.addControl('selectedEnvironment', new FormControl(auto));
|
|
40652
|
+
}
|
|
40653
|
+
else {
|
|
40654
|
+
grp.get('selectedEnvironment').setValue(auto, { emitEvent: false });
|
|
40655
|
+
}
|
|
40656
|
+
}
|
|
40657
|
+
this.environmentSelectConfigCache.delete(`${variable.name}_environment`);
|
|
40658
|
+
this.environmentParameterSelectConfigCache.delete(`${variable.name}_envParam`);
|
|
40659
|
+
}
|
|
40660
|
+
}
|
|
40259
40661
|
/**
|
|
40260
40662
|
* Get unique environments from environment options
|
|
40261
40663
|
*/
|
|
@@ -40286,6 +40688,7 @@ class TemplateVariablesFormComponent {
|
|
|
40286
40688
|
* Get select config for environment dropdown (first dropdown - select environment)
|
|
40287
40689
|
*/
|
|
40288
40690
|
getEnvironmentSelectConfig(variable, index) {
|
|
40691
|
+
var _a;
|
|
40289
40692
|
const cacheKey = `${variable.name}_environment`;
|
|
40290
40693
|
if (this.environmentSelectConfigCache.has(cacheKey)) {
|
|
40291
40694
|
return this.environmentSelectConfigCache.get(cacheKey);
|
|
@@ -40308,18 +40711,42 @@ class TemplateVariablesFormComponent {
|
|
|
40308
40711
|
label: variable.selectedEnvironment
|
|
40309
40712
|
});
|
|
40310
40713
|
}
|
|
40311
|
-
// Ensure form control exists for environment selection
|
|
40714
|
+
// Ensure form control exists for environment selection. Auto-default to the
|
|
40715
|
+
// test case's env when the variable doesn't already have a selection — the
|
|
40716
|
+
// env-on-test-case contract leaves nothing to choose between.
|
|
40312
40717
|
const variableGroup = this.getVariableFormGroup(variable.name);
|
|
40718
|
+
const autoDefault = this.resolveDefaultEnvironmentName();
|
|
40719
|
+
const currentEnv = variable.selectedEnvironment || autoDefault || '';
|
|
40720
|
+
if (currentEnv && currentEnv !== variable.selectedEnvironment) {
|
|
40721
|
+
variable.selectedEnvironment = currentEnv;
|
|
40722
|
+
const envOption = this.environmentOptions.find(env => env.environment === currentEnv);
|
|
40723
|
+
if (envOption) {
|
|
40724
|
+
const idMatch = envOption.id.match(/env-(\d+)-/);
|
|
40725
|
+
if (idMatch && idMatch[1]) {
|
|
40726
|
+
variable.selectedEnvironmentId = parseInt(idMatch[1], 10);
|
|
40727
|
+
}
|
|
40728
|
+
}
|
|
40729
|
+
}
|
|
40313
40730
|
if (variableGroup && !variableGroup.get('selectedEnvironment')) {
|
|
40314
|
-
const currentEnv = variable.selectedEnvironment || '';
|
|
40315
40731
|
variableGroup.addControl('selectedEnvironment', new FormControl(currentEnv));
|
|
40316
40732
|
}
|
|
40733
|
+
else if (variableGroup) {
|
|
40734
|
+
const ctrl = variableGroup.get('selectedEnvironment');
|
|
40735
|
+
if (ctrl && !ctrl.value && currentEnv) {
|
|
40736
|
+
ctrl.setValue(currentEnv, { emitEvent: false });
|
|
40737
|
+
}
|
|
40738
|
+
}
|
|
40739
|
+
// env-on-test-case: when the test case is bound to a specific environment,
|
|
40740
|
+
// there is no other valid choice — disable the dropdown so the user can't
|
|
40741
|
+
// accidentally pick a different env. Auto-select continues to populate it.
|
|
40742
|
+
const lockToTestCaseEnv = !!((_a = this.testCaseEnvironmentName) !== null && _a !== void 0 ? _a : '').trim();
|
|
40317
40743
|
const config = {
|
|
40318
40744
|
key: 'selectedEnvironment',
|
|
40319
40745
|
placeholder: `Select Environment`,
|
|
40320
40746
|
multiple: false,
|
|
40321
|
-
searchable:
|
|
40322
|
-
serverSearch:
|
|
40747
|
+
searchable: !lockToTestCaseEnv,
|
|
40748
|
+
serverSearch: !lockToTestCaseEnv,
|
|
40749
|
+
disabled: lockToTestCaseEnv,
|
|
40323
40750
|
options: optionsArray,
|
|
40324
40751
|
hasMore: this.hasMoreEnvironments,
|
|
40325
40752
|
isLoading: this.isLoadingEnvironments,
|
|
@@ -40861,10 +41288,10 @@ class TemplateVariablesFormComponent {
|
|
|
40861
41288
|
}
|
|
40862
41289
|
}
|
|
40863
41290
|
TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
40864
|
-
TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\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-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange", "validityChange"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "elements", "hasMoreScreenNames", "isLoadingScreenNames", "hasMoreElements", "isLoadingElements", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "searchElements", "loadMoreElements", "searchElementsByScreenName", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
41291
|
+
TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", globalVariableOptions: "globalVariableOptions", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseTestDataId: "testCaseTestDataId", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", searchGlobalVariables: "searchGlobalVariables", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with Value Source segment strip -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n Value Source<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-segment-control\n *ngIf=\"!isEditInDepth\"\n [segments]=\"visibleDataTypeSegments\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\n <cqa-dynamic-select\n *ngIf=\"isEditInDepth\"\n [form]=\"getFormGroupAt(i)!\"\n [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isGlobalType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Global Data<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getGlobalVariableSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\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-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange", "validityChange"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "elements", "hasMoreScreenNames", "isLoadingScreenNames", "hasMoreElements", "isLoadingElements", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "searchElements", "loadMoreElements", "searchElementsByScreenName", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40865
41292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
|
|
40866
41293
|
type: Component,
|
|
40867
|
-
args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\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-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"] }]
|
|
41294
|
+
args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with Value Source segment strip -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n Value Source<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-segment-control\n *ngIf=\"!isEditInDepth\"\n [segments]=\"visibleDataTypeSegments\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\n <cqa-dynamic-select\n *ngIf=\"isEditInDepth\"\n [form]=\"getFormGroupAt(i)!\"\n [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isGlobalType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Global Data<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getGlobalVariableSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }}\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-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"] }]
|
|
40868
41295
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
|
|
40869
41296
|
type: Input
|
|
40870
41297
|
}], variablesForm: [{
|
|
@@ -40903,6 +41330,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
40903
41330
|
type: Input
|
|
40904
41331
|
}], isLoadingEnvironments: [{
|
|
40905
41332
|
type: Input
|
|
41333
|
+
}], globalVariableOptions: [{
|
|
41334
|
+
type: Input
|
|
41335
|
+
}], isLoadingGlobalVariables: [{
|
|
41336
|
+
type: Input
|
|
41337
|
+
}], testCaseEnvironmentName: [{
|
|
41338
|
+
type: Input
|
|
41339
|
+
}], testCaseTestDataId: [{
|
|
41340
|
+
type: Input
|
|
40906
41341
|
}], defaultTestDataProfileId: [{
|
|
40907
41342
|
type: Input
|
|
40908
41343
|
}], defaultTestDataStartIndex: [{
|
|
@@ -40951,6 +41386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
40951
41386
|
type: Output
|
|
40952
41387
|
}], loadMoreEnvironments: [{
|
|
40953
41388
|
type: Output
|
|
41389
|
+
}], searchGlobalVariables: [{
|
|
41390
|
+
type: Output
|
|
40954
41391
|
}], cancelElementForm: [{
|
|
40955
41392
|
type: Output
|
|
40956
41393
|
}], elementFormVisibilityChange: [{
|
|
@@ -41006,6 +41443,9 @@ class StepBuilderActionComponent {
|
|
|
41006
41443
|
this.hasMoreEnvironments = false;
|
|
41007
41444
|
/** True while parent is loading environments (search or load more) */
|
|
41008
41445
|
this.isLoadingEnvironments = false;
|
|
41446
|
+
/** Global Data variables (workspace-scoped) for the Global Data tab. */
|
|
41447
|
+
this.globalVariableOptions = [];
|
|
41448
|
+
this.isLoadingGlobalVariables = false;
|
|
41009
41449
|
/** Whether current step creation is happening inside FOR loop context */
|
|
41010
41450
|
this.isInsideForLoopStep = false;
|
|
41011
41451
|
/** True when the parent test case has a test data profile configured (testCase.testDataId is set). */
|
|
@@ -41026,6 +41466,7 @@ class StepBuilderActionComponent {
|
|
|
41026
41466
|
this.loadMoreUploads = new EventEmitter(); // Emit when user scrolls to load more uploads
|
|
41027
41467
|
this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
|
|
41028
41468
|
this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
|
|
41469
|
+
this.searchGlobalVariables = new EventEmitter();
|
|
41029
41470
|
/** Emit when step is created */
|
|
41030
41471
|
this.createStep = new EventEmitter();
|
|
41031
41472
|
/** Emit when cancelled */
|
|
@@ -41839,10 +42280,10 @@ class StepBuilderActionComponent {
|
|
|
41839
42280
|
}
|
|
41840
42281
|
}
|
|
41841
42282
|
StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
41842
|
-
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isCreatingStep: "isCreatingStep", elementScreenPrefill: "elementScreenPrefill" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: 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"] }] });
|
|
42283
|
+
StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", globalVariableOptions: "globalVariableOptions", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseTestDataId: "testCaseTestDataId", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isCreatingStep: "isCreatingStep", elementScreenPrefill: "elementScreenPrefill" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", searchGlobalVariables: "searchGlobalVariables", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [globalVariableOptions]=\"globalVariableOptions\"\n [isLoadingGlobalVariables]=\"isLoadingGlobalVariables\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (searchGlobalVariables)=\"searchGlobalVariables.emit($event)\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "globalVariableOptions", "isLoadingGlobalVariables", "testCaseEnvironmentName", "testCaseTestDataId", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "searchGlobalVariables", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: 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"] }] });
|
|
41843
42284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
|
|
41844
42285
|
type: Component,
|
|
41845
|
-
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
42286
|
+
args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n <!-- Header -->\n \n <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && !selectedTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onCancelTemplateSelection()\">\n </cqa-button>\n </div>\n <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n <!-- Search Bar -->\n <div class=\"cqa-pb-1\">\n <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n Template library\n </p>\n </div>\n <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n </div>\n\n <!-- Template List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n <div class=\"cqa-py-2\">\n <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n (click)=\"selectTemplate(template)\">\n <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n </div>\n </div>\n\n <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n No templates found\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n <!-- Instruction Text with Element Buttons -->\n <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n </div>\n \n <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n <cqa-button \n *ngIf=\"selectorVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Element\"\n (clicked)=\"onShowElementForm()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"parameterVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Parameter\"\n (clicked)=\"redirectToParameter.emit()\">\n </cqa-button>\n <cqa-button \n *ngIf=\"environmentVariableAvailable\"\n variant=\"outlined\" \n btnSize=\"sm\"\n icon=\"add\"\n text=\"Create Environment\"\n (clicked)=\"redirectToEnvironment.emit()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Fields in Two Columns -->\n <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n <!-- Template Variables Form Component -->\n <cqa-template-variables-form\n #templateVariablesForm\n style=\"width: 100%;\"\n [isDebug]=\"isDebug\"\n [templateVariables]=\"templateVariables\"\n [variablesForm]=\"variablesForm\"\n [metadata]=\"metadata\"\n [description]=\"description\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [uploadOptions]=\"uploadOptions\"\n [hasMoreUploads]=\"hasMoreUploads\"\n [isLoadingUploads]=\"isLoadingUploads\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [globalVariableOptions]=\"globalVariableOptions\"\n [isLoadingGlobalVariables]=\"isLoadingGlobalVariables\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n [createElementVisible]=\"createElementVisible\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"metadata = $event\"\n (descriptionChange)=\"description = $event\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchUploads)=\"searchUploads.emit($event)\"\n (loadMoreUploads)=\"loadMoreUploads.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (searchGlobalVariables)=\"searchGlobalVariables.emit($event)\"\n (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n </cqa-template-variables-form>\n </div>\n\n <!-- Advanced (Expandable) -->\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n <div>\n \n </div>\n </div>\n\n\n </div>\n\n <!-- Action Buttons -->\n <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge\n label=\"Creating\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
41846
42287
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showHeader: [{
|
|
41847
42288
|
type: Input
|
|
41848
42289
|
}], changeTemplateSignal: [{
|
|
@@ -41901,6 +42342,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
41901
42342
|
type: Input
|
|
41902
42343
|
}], isLoadingEnvironments: [{
|
|
41903
42344
|
type: Input
|
|
42345
|
+
}], globalVariableOptions: [{
|
|
42346
|
+
type: Input
|
|
42347
|
+
}], isLoadingGlobalVariables: [{
|
|
42348
|
+
type: Input
|
|
42349
|
+
}], testCaseEnvironmentName: [{
|
|
42350
|
+
type: Input
|
|
42351
|
+
}], testCaseTestDataId: [{
|
|
42352
|
+
type: Input
|
|
41904
42353
|
}], defaultTestDataProfileId: [{
|
|
41905
42354
|
type: Input
|
|
41906
42355
|
}], defaultTestDataStartIndex: [{
|
|
@@ -41943,6 +42392,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
41943
42392
|
type: Output
|
|
41944
42393
|
}], loadMoreEnvironments: [{
|
|
41945
42394
|
type: Output
|
|
42395
|
+
}], searchGlobalVariables: [{
|
|
42396
|
+
type: Output
|
|
41946
42397
|
}], createStep: [{
|
|
41947
42398
|
type: Output
|
|
41948
42399
|
}], cancelled: [{
|
|
@@ -42025,6 +42476,11 @@ class StepBuilderLoopComponent {
|
|
|
42025
42476
|
this.loadMoreEnvironments = new EventEmitter();
|
|
42026
42477
|
this.redirectToParameter = new EventEmitter();
|
|
42027
42478
|
this.redirectToEnvironment = new EventEmitter();
|
|
42479
|
+
/**
|
|
42480
|
+
* Emitted when the user clicks "Manage profiles" in the empty state. Host
|
|
42481
|
+
* navigates to the Environment & Data Management screen for the active env.
|
|
42482
|
+
*/
|
|
42483
|
+
this.manageProfilesClicked = new EventEmitter();
|
|
42028
42484
|
this.selectedWhileTemplate = null;
|
|
42029
42485
|
this.selectedWhileDescription = '';
|
|
42030
42486
|
this.selectedWhileMetadata = '';
|
|
@@ -42630,10 +43086,10 @@ class StepBuilderLoopComponent {
|
|
|
42630
43086
|
}
|
|
42631
43087
|
}
|
|
42632
43088
|
StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
42633
|
-
StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2 for-loop-builder\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n Data Profile is disabled because it is set at the test case level configuration.\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
43089
|
+
StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep", testCaseEnvironmentName: "testCaseEnvironmentName" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment", manageProfilesClicked: "manageProfilesClicked" }, 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 for-loop-builder\">\n <!-- Env banner \u2014 surfaces which environment's variables and TDPs are in scope. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and data profiles are resolved from this environment.</span>\n </div>\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Empty state: env has no attached TDPs. Mirrors the design from CON-1305 follow-ups. -->\n <ng-container *ngIf=\"(dataProfileOptions?.length ?? 0) === 0 && !isLoadingDataProfiles; else dataProfileForm\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-items-center cqa-text-center cqa-gap-2 cqa-p-6 cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-gray-300 cqa-bg-gray-50\">\n <div class=\"cqa-text-base cqa-font-semibold cqa-text-gray-800\">\n No test data profiles assigned to\n <ng-container *ngIf=\"testCaseEnvironmentName\">{{ testCaseEnvironmentName }} </ng-container>Environment\n </div>\n <div class=\"cqa-text-xs cqa-text-gray-500 cqa-max-w-md\">\n For Loops need a test data profile linked to the active environment.\n Assign a profile in Environment & Data Management or switch environment.\n </div>\n <cqa-button\n class=\"cqa-mt-2\"\n variant=\"filled\"\n text=\"Manage profiles\"\n (clicked)=\"manageProfilesClicked.emit()\">\n </cqa-button>\n </div>\n </ng-container>\n <ng-template #dataProfileForm>\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n Data Profile is disabled because it is set at the test case level configuration.\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "globalVariableOptions", "isLoadingGlobalVariables", "testCaseEnvironmentName", "testCaseTestDataId", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "searchGlobalVariables", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
42634
43090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
|
|
42635
43091
|
type: Component,
|
|
42636
|
-
args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2 for-loop-builder\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n Data Profile is disabled because it is set at the test case level configuration.\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
43092
|
+
args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2 for-loop-builder\">\n <!-- Env banner \u2014 surfaces which environment's variables and TDPs are in scope. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and data profiles are resolved from this environment.</span>\n </div>\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Empty state: env has no attached TDPs. Mirrors the design from CON-1305 follow-ups. -->\n <ng-container *ngIf=\"(dataProfileOptions?.length ?? 0) === 0 && !isLoadingDataProfiles; else dataProfileForm\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-items-center cqa-text-center cqa-gap-2 cqa-p-6 cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-gray-300 cqa-bg-gray-50\">\n <div class=\"cqa-text-base cqa-font-semibold cqa-text-gray-800\">\n No test data profiles assigned to\n <ng-container *ngIf=\"testCaseEnvironmentName\">{{ testCaseEnvironmentName }} </ng-container>Environment\n </div>\n <div class=\"cqa-text-xs cqa-text-gray-500 cqa-max-w-md\">\n For Loops need a test data profile linked to the active environment.\n Assign a profile in Environment & Data Management or switch environment.\n </div>\n <cqa-button\n class=\"cqa-mt-2\"\n variant=\"filled\"\n text=\"Manage profiles\"\n (clicked)=\"manageProfilesClicked.emit()\">\n </cqa-button>\n </div>\n </ng-container>\n <ng-template #dataProfileForm>\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n Data Profile is disabled because it is set at the test case level configuration.\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div> \n </div>\n</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
42637
43093
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { loopType: [{
|
|
42638
43094
|
type: Input
|
|
42639
43095
|
}], selectOptions: [{
|
|
@@ -42706,6 +43162,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42706
43162
|
type: Input
|
|
42707
43163
|
}], testStep: [{
|
|
42708
43164
|
type: Input
|
|
43165
|
+
}], testCaseEnvironmentName: [{
|
|
43166
|
+
type: Input
|
|
42709
43167
|
}], loadMoreElements: [{
|
|
42710
43168
|
type: Output
|
|
42711
43169
|
}], searchElements: [{
|
|
@@ -42734,6 +43192,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42734
43192
|
type: Output
|
|
42735
43193
|
}], redirectToEnvironment: [{
|
|
42736
43194
|
type: Output
|
|
43195
|
+
}], manageProfilesClicked: [{
|
|
43196
|
+
type: Output
|
|
42737
43197
|
}] } });
|
|
42738
43198
|
|
|
42739
43199
|
class StepBuilderConditionComponent {
|
|
@@ -42772,6 +43232,9 @@ class StepBuilderConditionComponent {
|
|
|
42772
43232
|
this.environmentOptions = [];
|
|
42773
43233
|
this.hasMoreEnvironments = false;
|
|
42774
43234
|
this.isLoadingEnvironments = false;
|
|
43235
|
+
/** Global Data variables (workspace-scoped) for the Global Data tab. */
|
|
43236
|
+
this.globalVariableOptions = [];
|
|
43237
|
+
this.isLoadingGlobalVariables = false;
|
|
42775
43238
|
this.isInsideForLoopStep = false;
|
|
42776
43239
|
this.hasTestDataProfile = false;
|
|
42777
43240
|
/** True while parent is creating the step (API in progress); show loader on Create Step button */
|
|
@@ -42793,6 +43256,7 @@ class StepBuilderConditionComponent {
|
|
|
42793
43256
|
this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
|
|
42794
43257
|
this.redirectToParameter = new EventEmitter();
|
|
42795
43258
|
this.redirectToEnvironment = new EventEmitter();
|
|
43259
|
+
this.searchGlobalVariables = new EventEmitter();
|
|
42796
43260
|
this.includeElse = false;
|
|
42797
43261
|
// Cache for value configs to avoid recreating on every change detection
|
|
42798
43262
|
this.valueConfigCache = null;
|
|
@@ -43501,10 +43965,10 @@ class StepBuilderConditionComponent {
|
|
|
43501
43965
|
}
|
|
43502
43966
|
}
|
|
43503
43967
|
StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
43504
|
-
StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { 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"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43968
|
+
StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", globalVariableOptions: "globalVariableOptions", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseTestDataId: "testCaseTestDataId", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment", searchGlobalVariables: "searchGlobalVariables" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [globalVariableOptions]=\"globalVariableOptions\"\n [isLoadingGlobalVariables]=\"isLoadingGlobalVariables\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (searchGlobalVariables)=\"searchGlobalVariables.emit($event)\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "globalVariableOptions", "isLoadingGlobalVariables", "testCaseEnvironmentName", "testCaseTestDataId", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "searchGlobalVariables", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { 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"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43505
43969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
|
|
43506
43970
|
type: Component,
|
|
43507
|
-
args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", styles: [] }]
|
|
43971
|
+
args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Create Condition Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Condition Rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n <div\n *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <!-- Condition Row -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Condition Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ getConditionLabel(i) }}\n </div>\n\n <!-- Operator Dropdown -->\n <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Value Template Dropdown -->\n <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Remove Button -->\n <cqa-button\n *ngIf=\"i >= 1\"\n variant=\"text\"\n icon=\"close\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n (click)=\"removeCondition(i)\"\n [attr.aria-label]=\"'Remove condition'\">\n </cqa-button>\n <!-- <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n [attr.aria-label]=\"'Remove condition'\">\n <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n </button> -->\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n </div>\n \n </div>\n \n <!-- Template Variables Form Component (includes Description and Metadata) -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getConditionTemplateVariables(i)\"\n [variablesForm]=\"getConditionVariablesForm(i)\"\n [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [globalVariableOptions]=\"globalVariableOptions\"\n [isLoadingGlobalVariables]=\"isLoadingGlobalVariables\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (searchGlobalVariables)=\"searchGlobalVariables.emit($event)\">\n </cqa-template-variables-form>\n \n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleConditionAdvanced(i)\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Add Condition Button -->\n <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n <cqa-button\n variant=\"text\"\n icon=\"add\"\n iconPosition=\"start\"\n [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n [text]=\"'Add Condition'\"\n (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Include ELSE Branch Section -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-flex cqa-flex-col\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n Include ELSE branch\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n Execute alternative steps when condition is not met.\n </p>\n </div>\n <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </div>\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", styles: [] }]
|
|
43508
43972
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { operatorOptions: [{
|
|
43509
43973
|
type: Input
|
|
43510
43974
|
}], conditionTemplates: [{
|
|
@@ -43539,6 +44003,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43539
44003
|
type: Input
|
|
43540
44004
|
}], isLoadingEnvironments: [{
|
|
43541
44005
|
type: Input
|
|
44006
|
+
}], globalVariableOptions: [{
|
|
44007
|
+
type: Input
|
|
44008
|
+
}], isLoadingGlobalVariables: [{
|
|
44009
|
+
type: Input
|
|
44010
|
+
}], testCaseEnvironmentName: [{
|
|
44011
|
+
type: Input
|
|
44012
|
+
}], testCaseTestDataId: [{
|
|
44013
|
+
type: Input
|
|
43542
44014
|
}], defaultTestDataProfileId: [{
|
|
43543
44015
|
type: Input
|
|
43544
44016
|
}], defaultTestDataStartIndex: [{
|
|
@@ -43581,6 +44053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43581
44053
|
type: Output
|
|
43582
44054
|
}], redirectToEnvironment: [{
|
|
43583
44055
|
type: Output
|
|
44056
|
+
}], searchGlobalVariables: [{
|
|
44057
|
+
type: Output
|
|
43584
44058
|
}] } });
|
|
43585
44059
|
|
|
43586
44060
|
class StepBuilderDatabaseComponent {
|
|
@@ -46329,6 +46803,7 @@ const TEST_CASE_DETAILS_SELECT_KEYS = {
|
|
|
46329
46803
|
type: 'type',
|
|
46330
46804
|
labels: 'labels',
|
|
46331
46805
|
prerequisiteCases: 'prerequisiteCases',
|
|
46806
|
+
environment: 'environment',
|
|
46332
46807
|
testDataProfile: 'testDataProfile',
|
|
46333
46808
|
testDataSet: 'testDataSet',
|
|
46334
46809
|
videoRecording: 'videoRecording',
|
|
@@ -46453,6 +46928,7 @@ class TestCaseDetailsEditComponent {
|
|
|
46453
46928
|
type: new FormControl(''),
|
|
46454
46929
|
labels: new FormControl([]),
|
|
46455
46930
|
prerequisiteCases: new FormControl([]),
|
|
46931
|
+
environment: new FormControl(''),
|
|
46456
46932
|
testDataProfile: new FormControl(''),
|
|
46457
46933
|
testDataSet: new FormControl(''),
|
|
46458
46934
|
defaultBrowser: new FormControl(''),
|
|
@@ -46487,6 +46963,13 @@ class TestCaseDetailsEditComponent {
|
|
|
46487
46963
|
searchable: true,
|
|
46488
46964
|
options: [],
|
|
46489
46965
|
};
|
|
46966
|
+
this.environmentSelectConfig = {
|
|
46967
|
+
key: 'environment',
|
|
46968
|
+
label: '',
|
|
46969
|
+
placeholder: 'Select environment',
|
|
46970
|
+
searchable: true,
|
|
46971
|
+
options: [],
|
|
46972
|
+
};
|
|
46490
46973
|
this.testDataProfileSelectConfig = {
|
|
46491
46974
|
key: 'testDataProfile',
|
|
46492
46975
|
label: '',
|
|
@@ -46752,6 +47235,16 @@ class TestCaseDetailsEditComponent {
|
|
|
46752
47235
|
this._labelsSelectConfigDirty = true;
|
|
46753
47236
|
this.cdr.markForCheck();
|
|
46754
47237
|
}
|
|
47238
|
+
// Environment cascade: clear dependent Test Data Profile / Set selections so the host
|
|
47239
|
+
// re-fetches profiles for the new env. Mark dirty to prevent ngOnChanges re-seed.
|
|
47240
|
+
if (event.key === TEST_CASE_DETAILS_SELECT_KEYS.environment) {
|
|
47241
|
+
const tdpCtrl = this.editForm.get(TEST_CASE_DETAILS_SELECT_KEYS.testDataProfile);
|
|
47242
|
+
const tdsCtrl = this.editForm.get(TEST_CASE_DETAILS_SELECT_KEYS.testDataSet);
|
|
47243
|
+
tdpCtrl === null || tdpCtrl === void 0 ? void 0 : tdpCtrl.setValue('', { emitEvent: false });
|
|
47244
|
+
tdsCtrl === null || tdsCtrl === void 0 ? void 0 : tdsCtrl.setValue('', { emitEvent: false });
|
|
47245
|
+
tdpCtrl === null || tdpCtrl === void 0 ? void 0 : tdpCtrl.markAsDirty();
|
|
47246
|
+
tdsCtrl === null || tdsCtrl === void 0 ? void 0 : tdsCtrl.markAsDirty();
|
|
47247
|
+
}
|
|
46755
47248
|
// Mark Test Data selects as dirty so later input changes (options/config) don't overwrite user choice
|
|
46756
47249
|
if (event.key === TEST_CASE_DETAILS_SELECT_KEYS.testDataProfile || event.key === TEST_CASE_DETAILS_SELECT_KEYS.testDataSet) {
|
|
46757
47250
|
const ctrl = this.editForm.get(event.key);
|
|
@@ -46867,16 +47360,18 @@ class TestCaseDetailsEditComponent {
|
|
|
46867
47360
|
return !!((_a = section === null || section === void 0 ? void 0 : section.items) === null || _a === void 0 ? void 0 : _a.some((i) => i.label === 'Prerequisite Case'));
|
|
46868
47361
|
}
|
|
46869
47362
|
ngOnInit() {
|
|
46870
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
47363
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
46871
47364
|
this.editDescription = this.descriptionContent;
|
|
46872
47365
|
this.editStatus = (_b = (_a = this.statusItem) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
46873
47366
|
this.editPriority = (_d = (_c = this.priorityItem) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '';
|
|
46874
47367
|
const typeRaw = (_f = (this.getConfigItemValue('Execution', 'Type') || ((_e = this.typeItem) === null || _e === void 0 ? void 0 : _e.value))) !== null && _f !== void 0 ? _f : '';
|
|
46875
|
-
const
|
|
46876
|
-
const
|
|
46877
|
-
const
|
|
46878
|
-
const
|
|
46879
|
-
const
|
|
47368
|
+
const environmentRaw = (_g = this.getConfigItemValue('Execution', 'Environment')) !== null && _g !== void 0 ? _g : '';
|
|
47369
|
+
const testDataProfileRaw = (_h = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _h !== void 0 ? _h : '';
|
|
47370
|
+
const testDataSetRaw = this.normalizeTestDataSetRawValue((_j = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _j !== void 0 ? _j : '');
|
|
47371
|
+
const typeVal = (_m = this.resolveToOptionValue(typeRaw, (_l = (_k = this.selectConfigOverrides) === null || _k === void 0 ? void 0 : _k['type']) === null || _l === void 0 ? void 0 : _l.options)) !== null && _m !== void 0 ? _m : typeRaw;
|
|
47372
|
+
const environmentVal = (_q = this.resolveToOptionValue(environmentRaw, (_p = (_o = this.selectConfigOverrides) === null || _o === void 0 ? void 0 : _o['environment']) === null || _p === void 0 ? void 0 : _p.options)) !== null && _q !== void 0 ? _q : environmentRaw;
|
|
47373
|
+
const testDataProfileVal = (_t = this.resolveToOptionValue(testDataProfileRaw, (_s = (_r = this.selectConfigOverrides) === null || _r === void 0 ? void 0 : _r['testDataProfile']) === null || _s === void 0 ? void 0 : _s.options)) !== null && _t !== void 0 ? _t : testDataProfileRaw;
|
|
47374
|
+
const testDataSetVal = (_w = this.resolveToOptionValue(testDataSetRaw, (_v = (_u = this.selectConfigOverrides) === null || _u === void 0 ? void 0 : _u['testDataSet']) === null || _v === void 0 ? void 0 : _v.options)) !== null && _w !== void 0 ? _w : testDataSetRaw;
|
|
46880
47375
|
this.editLabels = [...this.labels];
|
|
46881
47376
|
const autoWaitVal = this.getWaitsRetriesValue('Enable Avoid Auto wait for steps') || this.getConfigItemValue('Waits & Retries', 'Auto Wait');
|
|
46882
47377
|
this.autoWaitEnabled = !!(autoWaitVal && autoWaitVal.trim() !== '' && String(autoWaitVal) !== 'false');
|
|
@@ -46890,7 +47385,7 @@ class TestCaseDetailsEditComponent {
|
|
|
46890
47385
|
const enableAiSmartness = this.getConfigItemValue('AI Configuration', 'Enable AI Smartness');
|
|
46891
47386
|
const defaultAiAction = this.getConfigItemValue('AI Configuration', 'Default AI Action');
|
|
46892
47387
|
const knowledgeBaseDefaultTestCaseRaw = this.getConfigItemValue('AI Configuration', 'Knowledge Base Default Test Case');
|
|
46893
|
-
const knowledgeBaseDefaultTestCase = (
|
|
47388
|
+
const knowledgeBaseDefaultTestCase = (_z = this.resolveToOptionValue(knowledgeBaseDefaultTestCaseRaw, (_y = (_x = this.selectConfigOverrides) === null || _x === void 0 ? void 0 : _x['knowledgeBaseDefaultTestCase']) === null || _y === void 0 ? void 0 : _y.options)) !== null && _z !== void 0 ? _z : knowledgeBaseDefaultTestCaseRaw;
|
|
46894
47389
|
const useAiMetadataRaw = this.getConfigItemValue('AI Configuration', 'Enable AI metadata collection');
|
|
46895
47390
|
const useAiMetadata = this.normalizeBooleanSelectValue(useAiMetadataRaw);
|
|
46896
47391
|
const prerequisiteCases = this.getPrerequisiteCasesFromConfig();
|
|
@@ -46910,6 +47405,7 @@ class TestCaseDetailsEditComponent {
|
|
|
46910
47405
|
priority: this.editPriority,
|
|
46911
47406
|
type: typeVal || '',
|
|
46912
47407
|
labels: this.editLabels,
|
|
47408
|
+
environment: environmentVal || '',
|
|
46913
47409
|
testDataProfile: testDataProfileVal || '',
|
|
46914
47410
|
testDataSet: testDataSetVal !== null && testDataSetVal !== void 0 ? testDataSetVal : '',
|
|
46915
47411
|
prerequisiteCases,
|
|
@@ -46933,12 +47429,13 @@ class TestCaseDetailsEditComponent {
|
|
|
46933
47429
|
return JSON.stringify(this.buildSavePayload()) !== this._initialFormSnapshot;
|
|
46934
47430
|
}
|
|
46935
47431
|
buildSavePayload() {
|
|
46936
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
47432
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
46937
47433
|
const status = (_b = (_a = this.editForm.get('status')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.editStatus;
|
|
46938
47434
|
const priority = (_d = (_c = this.editForm.get('priority')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : this.editPriority;
|
|
46939
47435
|
const typeVal = (_f = (_e = this.editForm.get('type')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '';
|
|
46940
|
-
const
|
|
46941
|
-
const
|
|
47436
|
+
const environmentVal = (_h = (_g = this.editForm.get('environment')) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : '';
|
|
47437
|
+
const testDataProfileVal = (_k = (_j = this.editForm.get('testDataProfile')) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : '';
|
|
47438
|
+
const testDataSetVal = (_m = (_l = this.editForm.get('testDataSet')) === null || _l === void 0 ? void 0 : _l.value) !== null && _m !== void 0 ? _m : '';
|
|
46942
47439
|
const configSectionsMerged = this.mergeConfigSections();
|
|
46943
47440
|
const configSectionsRow2Merged = this.mergeConfigSectionsRow2();
|
|
46944
47441
|
return {
|
|
@@ -46947,6 +47444,7 @@ class TestCaseDetailsEditComponent {
|
|
|
46947
47444
|
priority,
|
|
46948
47445
|
type: typeVal,
|
|
46949
47446
|
labels: this.editLabels,
|
|
47447
|
+
environmentId: environmentVal || null,
|
|
46950
47448
|
testDataProfileId: testDataProfileVal || null,
|
|
46951
47449
|
testDataSetIndex: testDataSetVal !== null && testDataSetVal !== void 0 ? testDataSetVal : null,
|
|
46952
47450
|
configSections: configSectionsMerged,
|
|
@@ -47018,11 +47516,12 @@ class TestCaseDetailsEditComponent {
|
|
|
47018
47516
|
return val && String(val).trim() ? String(val) : '';
|
|
47019
47517
|
}
|
|
47020
47518
|
ngOnChanges(changes) {
|
|
47021
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
|
|
47519
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23;
|
|
47022
47520
|
if (changes['labels'] || changes['selectConfigOverrides']) {
|
|
47023
47521
|
this._labelsSelectConfigDirty = true;
|
|
47024
47522
|
if (changes['selectConfigOverrides'] && ((_a = this.editForm) === null || _a === void 0 ? void 0 : _a.get('type'))) {
|
|
47025
47523
|
const typeCtrl = this.editForm.get('type');
|
|
47524
|
+
const envCtrl = this.editForm.get('environment');
|
|
47026
47525
|
const tdpCtrl = this.editForm.get('testDataProfile');
|
|
47027
47526
|
const tdsCtrl = this.editForm.get('testDataSet');
|
|
47028
47527
|
const enableAiCtrl = this.editForm.get('enableAiSmartness');
|
|
@@ -47032,17 +47531,22 @@ class TestCaseDetailsEditComponent {
|
|
|
47032
47531
|
const typeRaw = (_c = (this.getConfigItemValue('Execution', 'Type') || ((_b = this.typeItem) === null || _b === void 0 ? void 0 : _b.value))) !== null && _c !== void 0 ? _c : '';
|
|
47033
47532
|
patch['type'] = ((_f = this.resolveToOptionValue(typeRaw, (_e = (_d = this.selectConfigOverrides) === null || _d === void 0 ? void 0 : _d['type']) === null || _e === void 0 ? void 0 : _e.options)) !== null && _f !== void 0 ? _f : typeRaw) || '';
|
|
47034
47533
|
}
|
|
47534
|
+
if (envCtrl && !envCtrl.dirty) {
|
|
47535
|
+
const envRaw = (_g = this.getConfigItemValue('Execution', 'Environment')) !== null && _g !== void 0 ? _g : '';
|
|
47536
|
+
patch['environment'] =
|
|
47537
|
+
((_k = this.resolveToOptionValue(envRaw, (_j = (_h = this.selectConfigOverrides) === null || _h === void 0 ? void 0 : _h['environment']) === null || _j === void 0 ? void 0 : _j.options)) !== null && _k !== void 0 ? _k : envRaw) || '';
|
|
47538
|
+
}
|
|
47035
47539
|
// For Test Data Profile / Set, allow one-time re-resolve from config when options arrive,
|
|
47036
47540
|
// but never overwrite a user-edited (dirty) value.
|
|
47037
47541
|
if (tdpCtrl && !tdpCtrl.dirty) {
|
|
47038
|
-
const testDataProfileRaw = (
|
|
47542
|
+
const testDataProfileRaw = (_l = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _l !== void 0 ? _l : '';
|
|
47039
47543
|
patch['testDataProfile'] =
|
|
47040
|
-
((
|
|
47544
|
+
((_p = this.resolveToOptionValue(testDataProfileRaw, (_o = (_m = this.selectConfigOverrides) === null || _m === void 0 ? void 0 : _m['testDataProfile']) === null || _o === void 0 ? void 0 : _o.options)) !== null && _p !== void 0 ? _p : testDataProfileRaw) || '';
|
|
47041
47545
|
}
|
|
47042
47546
|
if (tdsCtrl && !tdsCtrl.dirty) {
|
|
47043
|
-
const testDataSetRaw = this.normalizeTestDataSetRawValue((
|
|
47547
|
+
const testDataSetRaw = this.normalizeTestDataSetRawValue((_q = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _q !== void 0 ? _q : '');
|
|
47044
47548
|
patch['testDataSet'] =
|
|
47045
|
-
(
|
|
47549
|
+
(_u = (_t = this.resolveToOptionValue(testDataSetRaw, (_s = (_r = this.selectConfigOverrides) === null || _r === void 0 ? void 0 : _r['testDataSet']) === null || _s === void 0 ? void 0 : _s.options)) !== null && _t !== void 0 ? _t : testDataSetRaw) !== null && _u !== void 0 ? _u : '';
|
|
47046
47550
|
}
|
|
47047
47551
|
// Re-resolve AI fields when their options arrive (they use display names as values).
|
|
47048
47552
|
if (enableAiCtrl && !enableAiCtrl.dirty) {
|
|
@@ -47058,7 +47562,7 @@ class TestCaseDetailsEditComponent {
|
|
|
47058
47562
|
const kbCtrl = this.editForm.get('knowledgeBaseDefaultTestCase');
|
|
47059
47563
|
if (kbCtrl && !kbCtrl.dirty) {
|
|
47060
47564
|
const kbRaw = this.getConfigItemValue('AI Configuration', 'Knowledge Base Default Test Case');
|
|
47061
|
-
const kbResolved = (
|
|
47565
|
+
const kbResolved = (_x = this.resolveToOptionValue(kbRaw, (_w = (_v = this.selectConfigOverrides) === null || _v === void 0 ? void 0 : _v['knowledgeBaseDefaultTestCase']) === null || _w === void 0 ? void 0 : _w.options)) !== null && _x !== void 0 ? _x : kbRaw;
|
|
47062
47566
|
if (kbResolved)
|
|
47063
47567
|
patch['knowledgeBaseDefaultTestCase'] = kbResolved;
|
|
47064
47568
|
}
|
|
@@ -47070,9 +47574,9 @@ class TestCaseDetailsEditComponent {
|
|
|
47070
47574
|
if (changes['descriptionContent'] || changes['labels'] || changes['metadataItems']) {
|
|
47071
47575
|
this.editDescription = this.descriptionContent;
|
|
47072
47576
|
this.editLabels = [...this.labels];
|
|
47073
|
-
this.editStatus = (
|
|
47074
|
-
this.editPriority = (
|
|
47075
|
-
const typeVal = (
|
|
47577
|
+
this.editStatus = (_z = (_y = this.statusItem) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : '';
|
|
47578
|
+
this.editPriority = (_1 = (_0 = this.priorityItem) === null || _0 === void 0 ? void 0 : _0.value) !== null && _1 !== void 0 ? _1 : '';
|
|
47579
|
+
const typeVal = (_3 = (this.getConfigItemValue('Execution', 'Type') || ((_2 = this.typeItem) === null || _2 === void 0 ? void 0 : _2.value))) !== null && _3 !== void 0 ? _3 : '';
|
|
47076
47580
|
const statusControl = this.editForm.get('status');
|
|
47077
47581
|
const priorityControl = this.editForm.get('priority');
|
|
47078
47582
|
const typeControl = this.editForm.get('type');
|
|
@@ -47090,14 +47594,16 @@ class TestCaseDetailsEditComponent {
|
|
|
47090
47594
|
const enableAiSmartness = this.getConfigItemValue('AI Configuration', 'Enable AI Smartness');
|
|
47091
47595
|
const defaultAiAction = this.getConfigItemValue('AI Configuration', 'Default AI Action');
|
|
47092
47596
|
const knowledgeBaseDefaultTestCaseRaw = this.getConfigItemValue('AI Configuration', 'Knowledge Base Default Test Case');
|
|
47093
|
-
const knowledgeBaseDefaultTestCase = (
|
|
47597
|
+
const knowledgeBaseDefaultTestCase = (_6 = this.resolveToOptionValue(knowledgeBaseDefaultTestCaseRaw, (_5 = (_4 = this.selectConfigOverrides) === null || _4 === void 0 ? void 0 : _4['knowledgeBaseDefaultTestCase']) === null || _5 === void 0 ? void 0 : _5.options)) !== null && _6 !== void 0 ? _6 : knowledgeBaseDefaultTestCaseRaw;
|
|
47094
47598
|
const prerequisiteCases = this.getPrerequisiteCasesFromConfig();
|
|
47095
|
-
const typeRaw = (
|
|
47096
|
-
const
|
|
47097
|
-
const
|
|
47098
|
-
const
|
|
47099
|
-
const
|
|
47100
|
-
const
|
|
47599
|
+
const typeRaw = (_8 = (this.getConfigItemValue('Execution', 'Type') || ((_7 = this.typeItem) === null || _7 === void 0 ? void 0 : _7.value))) !== null && _8 !== void 0 ? _8 : '';
|
|
47600
|
+
const environmentRaw = (_9 = this.getConfigItemValue('Execution', 'Environment')) !== null && _9 !== void 0 ? _9 : '';
|
|
47601
|
+
const testDataProfileRaw = (_10 = this.getConfigItemValue('Execution', 'Test Data Profile')) !== null && _10 !== void 0 ? _10 : '';
|
|
47602
|
+
const testDataSetRaw = this.normalizeTestDataSetRawValue((_11 = this.getConfigItemValue('Execution', 'Test Data Set')) !== null && _11 !== void 0 ? _11 : '');
|
|
47603
|
+
const typeVal = (_14 = this.resolveToOptionValue(typeRaw, (_13 = (_12 = this.selectConfigOverrides) === null || _12 === void 0 ? void 0 : _12['type']) === null || _13 === void 0 ? void 0 : _13.options)) !== null && _14 !== void 0 ? _14 : typeRaw;
|
|
47604
|
+
const environmentVal = (_17 = this.resolveToOptionValue(environmentRaw, (_16 = (_15 = this.selectConfigOverrides) === null || _15 === void 0 ? void 0 : _15['environment']) === null || _16 === void 0 ? void 0 : _16.options)) !== null && _17 !== void 0 ? _17 : environmentRaw;
|
|
47605
|
+
const testDataProfileVal = (_20 = this.resolveToOptionValue(testDataProfileRaw, (_19 = (_18 = this.selectConfigOverrides) === null || _18 === void 0 ? void 0 : _18['testDataProfile']) === null || _19 === void 0 ? void 0 : _19.options)) !== null && _20 !== void 0 ? _20 : testDataProfileRaw;
|
|
47606
|
+
const testDataSetVal = (_23 = this.resolveToOptionValue(testDataSetRaw, (_22 = (_21 = this.selectConfigOverrides) === null || _21 === void 0 ? void 0 : _21['testDataSet']) === null || _22 === void 0 ? void 0 : _22.options)) !== null && _23 !== void 0 ? _23 : testDataSetRaw;
|
|
47101
47607
|
const defaultBrowser = this.getConfigItemValue('Execution', 'Default Browser');
|
|
47102
47608
|
const videoRecordingRaw = this.getConfigItemValue('Execution', 'Video Recording');
|
|
47103
47609
|
const videoRecording = this.normalizeBooleanSelectValue(videoRecordingRaw);
|
|
@@ -47129,11 +47635,15 @@ class TestCaseDetailsEditComponent {
|
|
|
47129
47635
|
patch['prerequisiteCases'] = prerequisiteCases;
|
|
47130
47636
|
if (typeVal)
|
|
47131
47637
|
patch['type'] = typeVal;
|
|
47132
|
-
// Re-sync Test Data Profile / Set from config only when controls are NOT dirty
|
|
47638
|
+
// Re-sync Environment / Test Data Profile / Set from config only when controls are NOT dirty
|
|
47639
|
+
const envCtrl2 = this.editForm.get('environment');
|
|
47133
47640
|
const tdpCtrl2 = this.editForm.get('testDataProfile');
|
|
47134
47641
|
const tdsCtrl2 = this.editForm.get('testDataSet');
|
|
47642
|
+
const preserveEnv2 = envCtrl2 === null || envCtrl2 === void 0 ? void 0 : envCtrl2.dirty;
|
|
47135
47643
|
const preserveTdp2 = tdpCtrl2 === null || tdpCtrl2 === void 0 ? void 0 : tdpCtrl2.dirty;
|
|
47136
47644
|
const preserveTds2 = tdsCtrl2 === null || tdsCtrl2 === void 0 ? void 0 : tdsCtrl2.dirty;
|
|
47645
|
+
if (environmentVal && !preserveEnv2)
|
|
47646
|
+
patch['environment'] = environmentVal;
|
|
47137
47647
|
if (testDataProfileVal && !preserveTdp2)
|
|
47138
47648
|
patch['testDataProfile'] = testDataProfileVal;
|
|
47139
47649
|
if (testDataSetVal != null && testDataSetVal !== '' && !preserveTds2)
|
|
@@ -47179,7 +47689,7 @@ class TestCaseDetailsEditComponent {
|
|
|
47179
47689
|
this.save.emit(this.buildSavePayload());
|
|
47180
47690
|
}
|
|
47181
47691
|
mergeConfigSections() {
|
|
47182
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
47692
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
47183
47693
|
const platform = this.platform;
|
|
47184
47694
|
const videoRecordingValue = (_b = (_a = this.editForm.get('videoRecording')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
47185
47695
|
const videoRecording = videoRecordingValue === 'true' ? true : videoRecordingValue === 'false' ? false : videoRecordingValue;
|
|
@@ -47193,8 +47703,9 @@ class TestCaseDetailsEditComponent {
|
|
|
47193
47703
|
: [];
|
|
47194
47704
|
const prerequisiteCaseValue = prerequisiteCases.length ? prerequisiteCases.join(',') : null;
|
|
47195
47705
|
const typeValue = (_g = (_f = this.editForm.get('type')) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '';
|
|
47196
|
-
const
|
|
47197
|
-
const
|
|
47706
|
+
const environmentValue = (_j = (_h = this.editForm.get('environment')) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : '';
|
|
47707
|
+
const testDataProfileValue = (_l = (_k = this.editForm.get('testDataProfile')) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : '';
|
|
47708
|
+
const testDataSetValue = (_o = (_m = this.editForm.get('testDataSet')) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : '';
|
|
47198
47709
|
return this.configSections.map((section) => {
|
|
47199
47710
|
var _a, _b, _c;
|
|
47200
47711
|
if (section.title === 'Execution') {
|
|
@@ -47207,6 +47718,8 @@ class TestCaseDetailsEditComponent {
|
|
|
47207
47718
|
return Object.assign(Object.assign({}, item), { value: prerequisiteCaseValue });
|
|
47208
47719
|
if (item.label === 'Type')
|
|
47209
47720
|
return Object.assign(Object.assign({}, item), { value: typeValue });
|
|
47721
|
+
if (item.label === 'Environment')
|
|
47722
|
+
return Object.assign(Object.assign({}, item), { value: environmentValue });
|
|
47210
47723
|
if (item.label === 'Test Data Profile')
|
|
47211
47724
|
return Object.assign(Object.assign({}, item), { value: testDataProfileValue });
|
|
47212
47725
|
if (item.label === 'Test Data Set')
|
|
@@ -47341,10 +47854,10 @@ class TestCaseDetailsEditComponent {
|
|
|
47341
47854
|
}
|
|
47342
47855
|
}
|
|
47343
47856
|
TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
47344
|
-
TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange", configureApiMocking: "configureApiMocking" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
47857
|
+
TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange", configureApiMocking: "configureApiMocking" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Environment</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('environment', environmentSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('environment')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
47345
47858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
|
|
47346
47859
|
type: Component,
|
|
47347
|
-
args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
47860
|
+
args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Environment</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('environment', environmentSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('environment')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
47348
47861
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { descriptionTitle: [{
|
|
47349
47862
|
type: Input
|
|
47350
47863
|
}], descriptionContent: [{
|
|
@@ -49733,7 +50246,7 @@ class ConditionBranchEditorComponent {
|
|
|
49733
50246
|
}
|
|
49734
50247
|
}
|
|
49735
50248
|
ConditionBranchEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
49736
|
-
ConditionBranchEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionBranchEditorComponent, selector: "cqa-condition-branch-editor", inputs: { mode: "mode", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", initialConditionData: "initialConditionData", editTestStep: "editTestStep", branchLabel: "branchLabel", isSaving: "isSaving" }, outputs: { save: "save", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, 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 {{ title }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Single Condition Row -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" [formGroup]=\"conditionForm\">\n <!-- Condition Label + Template Dropdown -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ conditionRowLabel }}\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]=\"conditionForm\" [config]=\"getValueConfig()\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"hasSelectedTemplate\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"currentHtmlGrammar\">\n </div>\n </div>\n\n <!-- Template Variables Form -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getTemplateVariables()\"\n [variablesForm]=\"getVariablesForm()\"\n [metadata]=\"conditionForm.get('metadata')?.value || ''\"\n [description]=\"conditionForm.get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"conditionForm.get('metadata')?.setValue($event)\"\n (descriptionChange)=\"conditionForm.get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getAdvancedVariables().length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"isAdvancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"isAdvancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form\n [advancedVariables]=\"getAdvancedVariables()\"\n [advancedVariableForm]=\"getAdvancedVariablesForm()\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isSaving\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"saveButtonLabel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Saving\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
50249
|
+
ConditionBranchEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionBranchEditorComponent, selector: "cqa-condition-branch-editor", inputs: { mode: "mode", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", initialConditionData: "initialConditionData", editTestStep: "editTestStep", branchLabel: "branchLabel", isSaving: "isSaving" }, outputs: { save: "save", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, 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 {{ title }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Single Condition Row -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" [formGroup]=\"conditionForm\">\n <!-- Condition Label + Template Dropdown -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ conditionRowLabel }}\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]=\"conditionForm\" [config]=\"getValueConfig()\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"hasSelectedTemplate\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"currentHtmlGrammar\">\n </div>\n </div>\n\n <!-- Template Variables Form -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getTemplateVariables()\"\n [variablesForm]=\"getVariablesForm()\"\n [metadata]=\"conditionForm.get('metadata')?.value || ''\"\n [description]=\"conditionForm.get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"conditionForm.get('metadata')?.setValue($event)\"\n (descriptionChange)=\"conditionForm.get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getAdvancedVariables().length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"isAdvancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"isAdvancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form\n [advancedVariables]=\"getAdvancedVariables()\"\n [advancedVariableForm]=\"getAdvancedVariablesForm()\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isSaving\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"saveButtonLabel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Saving\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "globalVariableOptions", "isLoadingGlobalVariables", "testCaseEnvironmentName", "testCaseTestDataId", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "searchGlobalVariables", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49737
50250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, decorators: [{
|
|
49738
50251
|
type: Component,
|
|
49739
50252
|
args: [{ selector: 'cqa-condition-branch-editor', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ title }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Condition Builder Section -->\n <div class=\"cqa-mb-6\">\n <div class=\"cqa-mb-3\">\n <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n Condition Builder\n </h3>\n </div>\n\n <!-- Single Condition Row -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" [formGroup]=\"conditionForm\">\n <!-- Condition Label + Template Dropdown -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Label -->\n <div class=\"cqa-text-[12px] cqa-font-semibold\">\n {{ conditionRowLabel }}\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]=\"conditionForm\" [config]=\"getValueConfig()\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Template Variables Section (shown when template is selected) -->\n <div *ngIf=\"hasSelectedTemplate\" class=\"cqa-mt-2\">\n <!-- Template Grammar Display -->\n <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n [innerHTML]=\"currentHtmlGrammar\">\n </div>\n </div>\n\n <!-- Template Variables Form -->\n <cqa-template-variables-form\n style=\"width: 100%;\"\n [templateVariables]=\"getTemplateVariables()\"\n [variablesForm]=\"getVariablesForm()\"\n [metadata]=\"conditionForm.get('metadata')?.value || ''\"\n [description]=\"conditionForm.get('description')?.value || ''\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n (metadataChange)=\"conditionForm.get('metadata')?.setValue($event)\"\n (descriptionChange)=\"conditionForm.get('description')?.setValue($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n </cqa-template-variables-form>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"getAdvancedVariables().length > 0\" class=\"cqa-mt-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"isAdvancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"isAdvancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form\n [advancedVariables]=\"getAdvancedVariables()\"\n [advancedVariableForm]=\"getAdvancedVariablesForm()\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isSaving\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"saveButtonLabel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Saving\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
@@ -50771,11 +51284,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
50771
51284
|
type: Output
|
|
50772
51285
|
}] } });
|
|
50773
51286
|
|
|
51287
|
+
/**
|
|
51288
|
+
* Tag chip-list + autocomplete used by the New / Edit Global Variable dialog.
|
|
51289
|
+
* Mirrors the React `TagsEditor` block in
|
|
51290
|
+
* `Environment and Data Management_CD Deisgns/src/Global.jsx:179-237`:
|
|
51291
|
+
*
|
|
51292
|
+
* [chip × …] [+ Add tag] ← inactive state
|
|
51293
|
+
* [chip × …] [_input_ ↳ suggestions] ← active state
|
|
51294
|
+
*
|
|
51295
|
+
* Behavior:
|
|
51296
|
+
* - Backspace on an empty input removes the last tag.
|
|
51297
|
+
* - Enter commits the trimmed lowercase value (creates if not in available).
|
|
51298
|
+
* - Escape exits the input without committing.
|
|
51299
|
+
* - Suggestions are computed from `availableTags`, capped at 4.
|
|
51300
|
+
*/
|
|
51301
|
+
class GlobalVariableTagsInputComponent {
|
|
51302
|
+
constructor(cdr) {
|
|
51303
|
+
this.cdr = cdr;
|
|
51304
|
+
this.tags = [];
|
|
51305
|
+
this.availableTags = [];
|
|
51306
|
+
this.tagsChange = new EventEmitter();
|
|
51307
|
+
this.adding = false;
|
|
51308
|
+
this.draft = '';
|
|
51309
|
+
}
|
|
51310
|
+
get suggestions() {
|
|
51311
|
+
var _a, _b;
|
|
51312
|
+
const typed = this.draft.trim().toLowerCase();
|
|
51313
|
+
const taken = new Set(((_a = this.tags) !== null && _a !== void 0 ? _a : []).map(t => t.toLowerCase()));
|
|
51314
|
+
const pool = ((_b = this.availableTags) !== null && _b !== void 0 ? _b : []).filter(t => { var _a; return !taken.has(((_a = t.name) !== null && _a !== void 0 ? _a : '').toLowerCase()); });
|
|
51315
|
+
if (typed.length === 0) {
|
|
51316
|
+
return pool.slice(0, 4);
|
|
51317
|
+
}
|
|
51318
|
+
return pool
|
|
51319
|
+
.filter(t => { var _a; return ((_a = t.name) !== null && _a !== void 0 ? _a : '').toLowerCase().startsWith(typed); })
|
|
51320
|
+
.slice(0, 4);
|
|
51321
|
+
}
|
|
51322
|
+
beginAdd() {
|
|
51323
|
+
this.adding = true;
|
|
51324
|
+
this.draft = '';
|
|
51325
|
+
this.cdr.markForCheck();
|
|
51326
|
+
setTimeout(() => { var _a; return (_a = this.tagInputRef) === null || _a === void 0 ? void 0 : _a.nativeElement.focus(); }, 0);
|
|
51327
|
+
}
|
|
51328
|
+
onDraftChange(next) {
|
|
51329
|
+
this.draft = next !== null && next !== void 0 ? next : '';
|
|
51330
|
+
this.cdr.markForCheck();
|
|
51331
|
+
}
|
|
51332
|
+
onKeyDown(event) {
|
|
51333
|
+
if (event.key === 'Enter') {
|
|
51334
|
+
event.preventDefault();
|
|
51335
|
+
this.commitDraft();
|
|
51336
|
+
}
|
|
51337
|
+
else if (event.key === 'Escape') {
|
|
51338
|
+
event.preventDefault();
|
|
51339
|
+
this.cancelAdd();
|
|
51340
|
+
}
|
|
51341
|
+
else if (event.key === 'Backspace' && !this.draft && this.tags.length > 0) {
|
|
51342
|
+
event.preventDefault();
|
|
51343
|
+
this.removeAt(this.tags.length - 1);
|
|
51344
|
+
}
|
|
51345
|
+
}
|
|
51346
|
+
onSuggestionMouseDown(event, suggestion) {
|
|
51347
|
+
// mouseDown beats blur so the click registers before the input loses focus
|
|
51348
|
+
event.preventDefault();
|
|
51349
|
+
this.commit(suggestion.name);
|
|
51350
|
+
}
|
|
51351
|
+
onBlur() {
|
|
51352
|
+
// Defer so suggestion click has a chance to fire first
|
|
51353
|
+
setTimeout(() => {
|
|
51354
|
+
if (!this.adding) {
|
|
51355
|
+
return;
|
|
51356
|
+
}
|
|
51357
|
+
this.commitDraft();
|
|
51358
|
+
}, 150);
|
|
51359
|
+
}
|
|
51360
|
+
removeAt(index) {
|
|
51361
|
+
var _a;
|
|
51362
|
+
const next = ((_a = this.tags) !== null && _a !== void 0 ? _a : []).filter((_, i) => i !== index);
|
|
51363
|
+
this.tags = next;
|
|
51364
|
+
this.tagsChange.emit(next);
|
|
51365
|
+
this.cdr.markForCheck();
|
|
51366
|
+
}
|
|
51367
|
+
commitDraft() {
|
|
51368
|
+
var _a;
|
|
51369
|
+
const raw = ((_a = this.draft) !== null && _a !== void 0 ? _a : '').trim().toLowerCase();
|
|
51370
|
+
if (!raw) {
|
|
51371
|
+
this.cancelAdd();
|
|
51372
|
+
return;
|
|
51373
|
+
}
|
|
51374
|
+
this.commit(raw);
|
|
51375
|
+
}
|
|
51376
|
+
commit(name) {
|
|
51377
|
+
var _a, _b;
|
|
51378
|
+
const normalized = (name !== null && name !== void 0 ? name : '').trim().toLowerCase();
|
|
51379
|
+
if (!normalized) {
|
|
51380
|
+
return;
|
|
51381
|
+
}
|
|
51382
|
+
const taken = new Set(((_a = this.tags) !== null && _a !== void 0 ? _a : []).map(t => t.toLowerCase()));
|
|
51383
|
+
if (taken.has(normalized)) {
|
|
51384
|
+
this.cancelAdd();
|
|
51385
|
+
return;
|
|
51386
|
+
}
|
|
51387
|
+
const next = [...((_b = this.tags) !== null && _b !== void 0 ? _b : []), normalized];
|
|
51388
|
+
this.tags = next;
|
|
51389
|
+
this.tagsChange.emit(next);
|
|
51390
|
+
this.draft = '';
|
|
51391
|
+
this.adding = false;
|
|
51392
|
+
this.cdr.markForCheck();
|
|
51393
|
+
}
|
|
51394
|
+
cancelAdd() {
|
|
51395
|
+
this.adding = false;
|
|
51396
|
+
this.draft = '';
|
|
51397
|
+
this.cdr.markForCheck();
|
|
51398
|
+
}
|
|
51399
|
+
}
|
|
51400
|
+
GlobalVariableTagsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GlobalVariableTagsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
51401
|
+
GlobalVariableTagsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GlobalVariableTagsInputComponent, selector: "lib-global-variable-tags-input", inputs: { tags: "tags", availableTags: "availableTags" }, outputs: { tagsChange: "tagsChange" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "tagInputRef", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-1.5\">\n <!-- Selected tag chips -->\n <span *ngFor=\"let tag of tags; let i = index\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-xs cqa-font-medium\"\n style=\"background:#FAE8FF;color:#6B21A8;\">\n <mat-icon class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px] cqa-leading-[12px]\">sell</mat-icon>\n <span>{{ tag }}</span>\n <button type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-cursor-pointer hover:cqa-bg-[#E9D5FF]\"\n style=\"border:none;background:transparent;padding:0;\"\n (click)=\"removeAt(i)\"\n [attr.aria-label]=\"'Remove tag ' + tag\">\n <mat-icon class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px] cqa-leading-[12px]\">close</mat-icon>\n </button>\n </span>\n\n <!-- Inactive: \"+ Add tag\" pill -->\n <button *ngIf=\"!adding\" type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-xs cqa-cursor-pointer\"\n style=\"border:1px dashed #D4D4D8;background:transparent;color:#52525B;\"\n (click)=\"beginAdd()\">\n <mat-icon class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px] cqa-leading-[12px]\">add</mat-icon>\n <span>Add tag</span>\n </button>\n\n <!-- Active: input + suggestions. Input matches the dialog's other inputs:\n full-width row, 1px solid border, rounded; input border itself is the\n inner pill the user types into. Suggestion dropdown renders below. -->\n <div *ngIf=\"adding\" class=\"cqa-relative\" style=\"min-width:200px;\">\n <input #tagInput\n type=\"text\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-md cqa-text-sm cqa-outline-none cqa-w-full\"\n style=\"border:1px solid #6366F1;box-shadow:0 0 0 3px rgba(99,102,241,0.12);\"\n placeholder=\"Tag\u2026\"\n [value]=\"draft\"\n (input)=\"onDraftChange($any($event.target).value)\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\" />\n\n <div *ngIf=\"suggestions.length > 0\"\n class=\"cqa-absolute cqa-z-10 cqa-mt-1 cqa-bg-white cqa-rounded-md cqa-shadow-lg cqa-w-full\"\n style=\"border:1px solid #E5E7EB;max-height:220px;overflow-y:auto;left:0;\">\n <div *ngFor=\"let s of suggestions\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-3 cqa-py-2 cqa-cursor-pointer hover:cqa-bg-[#F3F4F6]\"\n (mousedown)=\"onSuggestionMouseDown($event, s)\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-text-gray-800\">\n <mat-icon class=\"!cqa-w-[14px] !cqa-h-[14px] !cqa-text-[14px] cqa-leading-[14px]\" style=\"color:#6B21A8;\">sell</mat-icon>\n <span>{{ s.name }}</span>\n </span>\n <span *ngIf=\"s.count != null\" class=\"cqa-text-[11px] cqa-text-gray-400\">{{ s.count }}</span>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
51402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GlobalVariableTagsInputComponent, decorators: [{
|
|
51403
|
+
type: Component,
|
|
51404
|
+
args: [{ selector: 'lib-global-variable-tags-input', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-1.5\">\n <!-- Selected tag chips -->\n <span *ngFor=\"let tag of tags; let i = index\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-xs cqa-font-medium\"\n style=\"background:#FAE8FF;color:#6B21A8;\">\n <mat-icon class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px] cqa-leading-[12px]\">sell</mat-icon>\n <span>{{ tag }}</span>\n <button type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-cursor-pointer hover:cqa-bg-[#E9D5FF]\"\n style=\"border:none;background:transparent;padding:0;\"\n (click)=\"removeAt(i)\"\n [attr.aria-label]=\"'Remove tag ' + tag\">\n <mat-icon class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px] cqa-leading-[12px]\">close</mat-icon>\n </button>\n </span>\n\n <!-- Inactive: \"+ Add tag\" pill -->\n <button *ngIf=\"!adding\" type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-xs cqa-cursor-pointer\"\n style=\"border:1px dashed #D4D4D8;background:transparent;color:#52525B;\"\n (click)=\"beginAdd()\">\n <mat-icon class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px] cqa-leading-[12px]\">add</mat-icon>\n <span>Add tag</span>\n </button>\n\n <!-- Active: input + suggestions. Input matches the dialog's other inputs:\n full-width row, 1px solid border, rounded; input border itself is the\n inner pill the user types into. Suggestion dropdown renders below. -->\n <div *ngIf=\"adding\" class=\"cqa-relative\" style=\"min-width:200px;\">\n <input #tagInput\n type=\"text\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-md cqa-text-sm cqa-outline-none cqa-w-full\"\n style=\"border:1px solid #6366F1;box-shadow:0 0 0 3px rgba(99,102,241,0.12);\"\n placeholder=\"Tag\u2026\"\n [value]=\"draft\"\n (input)=\"onDraftChange($any($event.target).value)\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\" />\n\n <div *ngIf=\"suggestions.length > 0\"\n class=\"cqa-absolute cqa-z-10 cqa-mt-1 cqa-bg-white cqa-rounded-md cqa-shadow-lg cqa-w-full\"\n style=\"border:1px solid #E5E7EB;max-height:220px;overflow-y:auto;left:0;\">\n <div *ngFor=\"let s of suggestions\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-3 cqa-py-2 cqa-cursor-pointer hover:cqa-bg-[#F3F4F6]\"\n (mousedown)=\"onSuggestionMouseDown($event, s)\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-text-gray-800\">\n <mat-icon class=\"!cqa-w-[14px] !cqa-h-[14px] !cqa-text-[14px] cqa-leading-[14px]\" style=\"color:#6B21A8;\">sell</mat-icon>\n <span>{{ s.name }}</span>\n </span>\n <span *ngIf=\"s.count != null\" class=\"cqa-text-[11px] cqa-text-gray-400\">{{ s.count }}</span>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
51405
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tags: [{
|
|
51406
|
+
type: Input
|
|
51407
|
+
}], availableTags: [{
|
|
51408
|
+
type: Input
|
|
51409
|
+
}], tagsChange: [{
|
|
51410
|
+
type: Output
|
|
51411
|
+
}], tagInputRef: [{
|
|
51412
|
+
type: ViewChild,
|
|
51413
|
+
args: ['tagInput']
|
|
51414
|
+
}] } });
|
|
51415
|
+
|
|
50774
51416
|
class NewGlobalVariableDialogComponent {
|
|
50775
51417
|
constructor(cdr) {
|
|
50776
51418
|
this.cdr = cdr;
|
|
50777
51419
|
this.mode = 'create';
|
|
50778
51420
|
this.existingNames = [];
|
|
51421
|
+
this.availableTags = [];
|
|
50779
51422
|
this.typeOptions = ['String', 'Number', 'Boolean', 'Password'];
|
|
50780
51423
|
this.typeDropdownOptions = [
|
|
50781
51424
|
{ label: 'String', value: 'String' },
|
|
@@ -50792,6 +51435,7 @@ class NewGlobalVariableDialogComponent {
|
|
|
50792
51435
|
this.value = '';
|
|
50793
51436
|
this.readWriteMode = 'RW';
|
|
50794
51437
|
this.description = '';
|
|
51438
|
+
this.tags = [];
|
|
50795
51439
|
this.passwordTouched = false;
|
|
50796
51440
|
this.nameError = null;
|
|
50797
51441
|
this.valueError = null;
|
|
@@ -50804,6 +51448,7 @@ class NewGlobalVariableDialogComponent {
|
|
|
50804
51448
|
this.value = (_c = this.initialValue.value) !== null && _c !== void 0 ? _c : '';
|
|
50805
51449
|
this.readWriteMode = (_d = this.initialValue.readWriteMode) !== null && _d !== void 0 ? _d : 'RW';
|
|
50806
51450
|
this.description = (_e = this.initialValue.description) !== null && _e !== void 0 ? _e : '';
|
|
51451
|
+
this.tags = Array.isArray(this.initialValue.tags) ? [...this.initialValue.tags] : [];
|
|
50807
51452
|
}
|
|
50808
51453
|
if (this.type === 'Boolean' && this.value !== 'true' && this.value !== 'false') {
|
|
50809
51454
|
this.value = 'false';
|
|
@@ -50899,6 +51544,10 @@ class NewGlobalVariableDialogComponent {
|
|
|
50899
51544
|
this.description = next;
|
|
50900
51545
|
this.cdr.markForCheck();
|
|
50901
51546
|
}
|
|
51547
|
+
onTagsChange(next) {
|
|
51548
|
+
this.tags = Array.isArray(next) ? [...next] : [];
|
|
51549
|
+
this.cdr.markForCheck();
|
|
51550
|
+
}
|
|
50902
51551
|
/**
|
|
50903
51552
|
* Called by the host (via DialogRef.getComponentInstance()) when the primary
|
|
50904
51553
|
* button is clicked. Returns the captured value when valid, or null when the
|
|
@@ -50932,6 +51581,7 @@ class NewGlobalVariableDialogComponent {
|
|
|
50932
51581
|
value: omitPasswordValue ? null : this.serializeValue(),
|
|
50933
51582
|
readWriteMode: this.readWriteMode,
|
|
50934
51583
|
description: this.description ? this.description : null,
|
|
51584
|
+
tags: [...this.tags],
|
|
50935
51585
|
};
|
|
50936
51586
|
}
|
|
50937
51587
|
serializeValue() {
|
|
@@ -50959,16 +51609,18 @@ class NewGlobalVariableDialogComponent {
|
|
|
50959
51609
|
}
|
|
50960
51610
|
}
|
|
50961
51611
|
NewGlobalVariableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewGlobalVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
50962
|
-
NewGlobalVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewGlobalVariableDialogComponent, selector: "cqa-new-global-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. ihg_api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
51612
|
+
NewGlobalVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewGlobalVariableDialogComponent, selector: "cqa-new-global-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", availableTags: "availableTags" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. ihg_api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Tags (optional) \u2014 between Value and Description per design -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">\n Tags <span class=\"cqa-text-xs cqa-font-normal cqa-text-gray-500\">(optional \u2014 for filtering & grouping)</span>\n </label>\n <lib-global-variable-tags-input\n [tags]=\"tags\"\n [availableTags]=\"availableTags\"\n (tagsChange)=\"onTagsChange($event)\">\n </lib-global-variable-tags-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: GlobalVariableTagsInputComponent, selector: "lib-global-variable-tags-input", inputs: ["tags", "availableTags"], outputs: ["tagsChange"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
50963
51613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewGlobalVariableDialogComponent, decorators: [{
|
|
50964
51614
|
type: Component,
|
|
50965
|
-
args: [{ selector: 'cqa-new-global-variable-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. ihg_api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n" }]
|
|
51615
|
+
args: [{ selector: 'cqa-new-global-variable-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. ihg_api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Tags (optional) \u2014 between Value and Description per design -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">\n Tags <span class=\"cqa-text-xs cqa-font-normal cqa-text-gray-500\">(optional \u2014 for filtering & grouping)</span>\n </label>\n <lib-global-variable-tags-input\n [tags]=\"tags\"\n [availableTags]=\"availableTags\"\n (tagsChange)=\"onTagsChange($event)\">\n </lib-global-variable-tags-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n" }]
|
|
50966
51616
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
|
|
50967
51617
|
type: Input
|
|
50968
51618
|
}], initialValue: [{
|
|
50969
51619
|
type: Input
|
|
50970
51620
|
}], existingNames: [{
|
|
50971
51621
|
type: Input
|
|
51622
|
+
}], availableTags: [{
|
|
51623
|
+
type: Input
|
|
50972
51624
|
}] } });
|
|
50973
51625
|
|
|
50974
51626
|
const ENVIRONMENT_ACCENT_COLORS = [
|
|
@@ -52173,6 +52825,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52173
52825
|
type: Input
|
|
52174
52826
|
}] } });
|
|
52175
52827
|
|
|
52828
|
+
class ElementCardComponent {
|
|
52829
|
+
constructor() {
|
|
52830
|
+
this.name = '';
|
|
52831
|
+
this.screen = '';
|
|
52832
|
+
this.updatedRelative = '';
|
|
52833
|
+
this.locatorBadge = '';
|
|
52834
|
+
this.selected = false;
|
|
52835
|
+
this.cardClick = new EventEmitter();
|
|
52836
|
+
}
|
|
52837
|
+
onClick() {
|
|
52838
|
+
this.cardClick.emit();
|
|
52839
|
+
}
|
|
52840
|
+
}
|
|
52841
|
+
ElementCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52842
|
+
ElementCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementCardComponent, selector: "cqa-element-card", inputs: { name: "name", screen: "screen", updatedRelative: "updatedRelative", locatorBadge: "locatorBadge", selected: "selected" }, outputs: { cardClick: "cardClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<button\n type=\"button\"\n (click)=\"onClick()\"\n [ngClass]=\"selected\n ? 'cqa-border-[#818CF8] cqa-bg-[#EEF2FF] cqa-shadow-[inset_3px_0_0_0_#4F46E5]'\n : 'cqa-border-[#E2E8F0] cqa-bg-white hover:cqa-bg-[#FAFAFF] hover:cqa-border-[#C7D2FE]'\"\n class=\"cqa-relative cqa-flex cqa-flex-col cqa-gap-1 cqa-w-full cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-text-left cqa-cursor-pointer cqa-transition-all cqa-duration-150 focus:cqa-outline-none\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-w-full\">\n <span class=\"cqa-flex-1 cqa-min-w-0 cqa-truncate cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">\n {{ name }}\n </span>\n <cqa-badge\n *ngIf=\"locatorBadge\"\n [label]=\"locatorBadge\"\n size=\"extra-small\"\n variant=\"default\"\n backgroundColor=\"#F1F5F9\"\n textColor=\"#475569\"\n borderColor=\"#E2E8F0\">\n </cqa-badge>\n </div>\n <div class=\"cqa-truncate cqa-text-xs cqa-text-[#64748B]\">Screen: {{ screen }}</div>\n <div *ngIf=\"updatedRelative\" class=\"cqa-text-[11px] cqa-text-[#94A3B8]\">{{ updatedRelative }}</div>\n</button>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementCardComponent, decorators: [{
|
|
52844
|
+
type: Component,
|
|
52845
|
+
args: [{ selector: 'cqa-element-card', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n (click)=\"onClick()\"\n [ngClass]=\"selected\n ? 'cqa-border-[#818CF8] cqa-bg-[#EEF2FF] cqa-shadow-[inset_3px_0_0_0_#4F46E5]'\n : 'cqa-border-[#E2E8F0] cqa-bg-white hover:cqa-bg-[#FAFAFF] hover:cqa-border-[#C7D2FE]'\"\n class=\"cqa-relative cqa-flex cqa-flex-col cqa-gap-1 cqa-w-full cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-text-left cqa-cursor-pointer cqa-transition-all cqa-duration-150 focus:cqa-outline-none\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-w-full\">\n <span class=\"cqa-flex-1 cqa-min-w-0 cqa-truncate cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">\n {{ name }}\n </span>\n <cqa-badge\n *ngIf=\"locatorBadge\"\n [label]=\"locatorBadge\"\n size=\"extra-small\"\n variant=\"default\"\n backgroundColor=\"#F1F5F9\"\n textColor=\"#475569\"\n borderColor=\"#E2E8F0\">\n </cqa-badge>\n </div>\n <div class=\"cqa-truncate cqa-text-xs cqa-text-[#64748B]\">Screen: {{ screen }}</div>\n <div *ngIf=\"updatedRelative\" class=\"cqa-text-[11px] cqa-text-[#94A3B8]\">{{ updatedRelative }}</div>\n</button>\n" }]
|
|
52846
|
+
}], propDecorators: { name: [{
|
|
52847
|
+
type: Input
|
|
52848
|
+
}], screen: [{
|
|
52849
|
+
type: Input
|
|
52850
|
+
}], updatedRelative: [{
|
|
52851
|
+
type: Input
|
|
52852
|
+
}], locatorBadge: [{
|
|
52853
|
+
type: Input
|
|
52854
|
+
}], selected: [{
|
|
52855
|
+
type: Input
|
|
52856
|
+
}], cardClick: [{
|
|
52857
|
+
type: Output
|
|
52858
|
+
}] } });
|
|
52859
|
+
|
|
52860
|
+
class TestDataProfileCardComponent {
|
|
52861
|
+
constructor() {
|
|
52862
|
+
this.name = '';
|
|
52863
|
+
this.rowsCount = 0;
|
|
52864
|
+
this.columnsCount = 0;
|
|
52865
|
+
this.permission = null;
|
|
52866
|
+
this.activeOnTestCase = false;
|
|
52867
|
+
}
|
|
52868
|
+
get rowsLabel() {
|
|
52869
|
+
return this.rowsCount === 1 ? 'row' : 'rows';
|
|
52870
|
+
}
|
|
52871
|
+
get colsLabel() {
|
|
52872
|
+
return this.columnsCount === 1 ? 'col' : 'cols';
|
|
52873
|
+
}
|
|
52874
|
+
}
|
|
52875
|
+
TestDataProfileCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52876
|
+
TestDataProfileCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataProfileCardComponent, selector: "cqa-test-data-profile-card", inputs: { name: "name", rowsCount: "rowsCount", columnsCount: "columnsCount", environmentName: "environmentName", permission: "permission", activeOnTestCase: "activeOnTestCase" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-relative cqa-flex cqa-flex-col cqa-gap-1 cqa-w-full cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white cqa-text-left\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-w-full\">\n <span class=\"cqa-flex-1 cqa-min-w-0 cqa-truncate cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">\n {{ name }}\n </span>\n <cqa-badge\n *ngIf=\"permission === 'RO'\"\n label=\"RO\"\n size=\"extra-small\"\n variant=\"error\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"permission === 'RW'\"\n label=\"RW\"\n size=\"extra-small\"\n variant=\"success\">\n </cqa-badge>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-w-full cqa-mt-[2px]\">\n <span class=\"cqa-text-xs cqa-text-[#64748B]\">\n {{ rowsCount }} {{ rowsLabel }} · {{ columnsCount }} {{ colsLabel }}\n </span>\n <span\n *ngIf=\"environmentName\"\n class=\"cqa-flex-shrink-0 cqa-text-[11px] cqa-font-medium cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-bg-[#EFF6FF] cqa-text-[#1E40AF] cqa-border cqa-border-solid cqa-border-[#DBEAFE]\">\n {{ environmentName }}\n </span>\n </div>\n <div *ngIf=\"activeOnTestCase\" class=\"cqa-mt-1\">\n <span class=\"cqa-inline-block cqa-text-[11px] cqa-font-medium cqa-px-[6px] cqa-py-[2px] cqa-rounded cqa-bg-[#F5F3FF] cqa-text-[#6D28D9] cqa-border cqa-border-solid cqa-border-[#DDD6FE]\">\n Active on this test case\n </span>\n </div>\n</div>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataProfileCardComponent, decorators: [{
|
|
52878
|
+
type: Component,
|
|
52879
|
+
args: [{ selector: 'cqa-test-data-profile-card', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-relative cqa-flex cqa-flex-col cqa-gap-1 cqa-w-full cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white cqa-text-left\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-w-full\">\n <span class=\"cqa-flex-1 cqa-min-w-0 cqa-truncate cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">\n {{ name }}\n </span>\n <cqa-badge\n *ngIf=\"permission === 'RO'\"\n label=\"RO\"\n size=\"extra-small\"\n variant=\"error\">\n </cqa-badge>\n <cqa-badge\n *ngIf=\"permission === 'RW'\"\n label=\"RW\"\n size=\"extra-small\"\n variant=\"success\">\n </cqa-badge>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-w-full cqa-mt-[2px]\">\n <span class=\"cqa-text-xs cqa-text-[#64748B]\">\n {{ rowsCount }} {{ rowsLabel }} · {{ columnsCount }} {{ colsLabel }}\n </span>\n <span\n *ngIf=\"environmentName\"\n class=\"cqa-flex-shrink-0 cqa-text-[11px] cqa-font-medium cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-bg-[#EFF6FF] cqa-text-[#1E40AF] cqa-border cqa-border-solid cqa-border-[#DBEAFE]\">\n {{ environmentName }}\n </span>\n </div>\n <div *ngIf=\"activeOnTestCase\" class=\"cqa-mt-1\">\n <span class=\"cqa-inline-block cqa-text-[11px] cqa-font-medium cqa-px-[6px] cqa-py-[2px] cqa-rounded cqa-bg-[#F5F3FF] cqa-text-[#6D28D9] cqa-border cqa-border-solid cqa-border-[#DDD6FE]\">\n Active on this test case\n </span>\n </div>\n</div>\n" }]
|
|
52880
|
+
}], propDecorators: { name: [{
|
|
52881
|
+
type: Input
|
|
52882
|
+
}], rowsCount: [{
|
|
52883
|
+
type: Input
|
|
52884
|
+
}], columnsCount: [{
|
|
52885
|
+
type: Input
|
|
52886
|
+
}], environmentName: [{
|
|
52887
|
+
type: Input
|
|
52888
|
+
}], permission: [{
|
|
52889
|
+
type: Input
|
|
52890
|
+
}], activeOnTestCase: [{
|
|
52891
|
+
type: Input
|
|
52892
|
+
}] } });
|
|
52893
|
+
|
|
52894
|
+
class DataLibraryPanelComponent {
|
|
52895
|
+
constructor() {
|
|
52896
|
+
this.searchTerm = '';
|
|
52897
|
+
this.searchPlaceholder = 'Search elements or test data';
|
|
52898
|
+
this.activeSubTab = 'elements';
|
|
52899
|
+
this.elements = [];
|
|
52900
|
+
this.profiles = [];
|
|
52901
|
+
this.isLoadingElements = false;
|
|
52902
|
+
this.isLoadingProfiles = false;
|
|
52903
|
+
this.selectedElementId = null;
|
|
52904
|
+
this.hasEnvironment = true;
|
|
52905
|
+
this.showElementsLink = true;
|
|
52906
|
+
this.showManageProfilesLink = true;
|
|
52907
|
+
this.searchTermChange = new EventEmitter();
|
|
52908
|
+
this.search = new EventEmitter();
|
|
52909
|
+
this.searchCleared = new EventEmitter();
|
|
52910
|
+
this.activeSubTabChange = new EventEmitter();
|
|
52911
|
+
this.elementCardClick = new EventEmitter();
|
|
52912
|
+
this.viewFullElementsClick = new EventEmitter();
|
|
52913
|
+
this.manageProfilesClick = new EventEmitter();
|
|
52914
|
+
/** Stable reference required by cqa-segment-control. */
|
|
52915
|
+
this.segments = [
|
|
52916
|
+
{ label: 'Elements', value: 'elements' },
|
|
52917
|
+
{ label: 'Test Data Profiles', value: 'profiles' },
|
|
52918
|
+
];
|
|
52919
|
+
/** Stable iteration source for skeleton placeholders during loading. */
|
|
52920
|
+
this.skeletonCards = [0, 1, 2, 3];
|
|
52921
|
+
}
|
|
52922
|
+
onSearchValueChange(value) {
|
|
52923
|
+
this.searchTerm = value !== null && value !== void 0 ? value : '';
|
|
52924
|
+
this.searchTermChange.emit(this.searchTerm);
|
|
52925
|
+
}
|
|
52926
|
+
onSearchSubmit(value) {
|
|
52927
|
+
this.search.emit(value !== null && value !== void 0 ? value : '');
|
|
52928
|
+
}
|
|
52929
|
+
onSearchCleared() {
|
|
52930
|
+
this.searchTerm = '';
|
|
52931
|
+
this.searchCleared.emit();
|
|
52932
|
+
}
|
|
52933
|
+
onSegmentChange(value) {
|
|
52934
|
+
if (value === 'elements' || value === 'profiles') {
|
|
52935
|
+
this.activeSubTab = value;
|
|
52936
|
+
this.activeSubTabChange.emit(value);
|
|
52937
|
+
}
|
|
52938
|
+
}
|
|
52939
|
+
onElementClick(id) {
|
|
52940
|
+
this.elementCardClick.emit(id);
|
|
52941
|
+
}
|
|
52942
|
+
onViewFullElements(event) {
|
|
52943
|
+
event.preventDefault();
|
|
52944
|
+
this.viewFullElementsClick.emit();
|
|
52945
|
+
}
|
|
52946
|
+
onManageProfiles(event) {
|
|
52947
|
+
event.preventDefault();
|
|
52948
|
+
this.manageProfilesClick.emit();
|
|
52949
|
+
}
|
|
52950
|
+
trackByElementId(_i, item) { return item.id; }
|
|
52951
|
+
trackByAttachmentId(_i, item) { return item.attachmentId; }
|
|
52952
|
+
get bannerLabel() {
|
|
52953
|
+
return this.environmentName && this.environmentName.trim().length
|
|
52954
|
+
? this.environmentName
|
|
52955
|
+
: 'this test case';
|
|
52956
|
+
}
|
|
52957
|
+
}
|
|
52958
|
+
DataLibraryPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DataLibraryPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52959
|
+
DataLibraryPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DataLibraryPanelComponent, selector: "cqa-data-library-panel", inputs: { searchTerm: "searchTerm", searchPlaceholder: "searchPlaceholder", environmentName: "environmentName", activeSubTab: "activeSubTab", elements: "elements", profiles: "profiles", isLoadingElements: "isLoadingElements", isLoadingProfiles: "isLoadingProfiles", selectedElementId: "selectedElementId", hasEnvironment: "hasEnvironment", showElementsLink: "showElementsLink", showManageProfilesLink: "showManageProfilesLink" }, outputs: { searchTermChange: "searchTermChange", search: "search", searchCleared: "searchCleared", activeSubTabChange: "activeSubTabChange", elementCardClick: "elementCardClick", viewFullElementsClick: "viewFullElementsClick", manageProfilesClick: "manageProfilesClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-bg-white\">\n <!-- Sticky region: search + env banner + segment. position:sticky pins inside the\n host scroll container (cqa-detail-side-panel scrolls our content) so only the\n cards below scroll past while these stay anchored. -->\n <div class=\"cqa-sticky cqa-top-0 cqa-z-10 cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2 cqa-pb-3 cqa-bg-white\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchTerm\"\n [showClear]=\"true\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\"\n (search)=\"onSearchSubmit($event)\"\n (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n\n <div class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F8FAFC] cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-md cqa-px-3 cqa-py-2\">\n Showing data for <span class=\"cqa-font-semibold cqa-text-[#0F172A]\">{{ bannerLabel }}</span> Environment\n </div>\n\n <cqa-segment-control\n [segments]=\"segments\"\n [value]=\"activeSubTab\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Scrollable region: section header + cards / empty / loading.\n Scrolling is owned by the host's scroll container; this div is just a normal block. -->\n <div class=\"cqa-pt-3 cqa-pb-6\">\n <ng-container *ngIf=\"activeSubTab === 'elements'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Elements</span>\n <a\n *ngIf=\"showElementsLink\"\n href=\"#\"\n (click)=\"onViewFullElements($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n View full library<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingElements && elements.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-element-card\n *ngFor=\"let el of elements; trackBy: trackByElementId\"\n [name]=\"el.name\"\n [screen]=\"el.screen\"\n [updatedRelative]=\"el.updatedRelative\"\n [locatorBadge]=\"el.locatorBadge\"\n [selected]=\"selectedElementId === el.id\"\n (cardClick)=\"onElementClick(el.id)\">\n </cqa-element-card>\n </div>\n\n <div *ngIf=\"!isLoadingElements && !elements.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"searchTerm; else noElementsAtAll\">\n No elements match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noElementsAtAll>No elements yet for this workspace.</ng-template>\n </div>\n\n <div *ngIf=\"isLoadingElements\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading elements\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-2 cqa-w-1/4 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"activeSubTab === 'profiles'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Test Data Profiles</span>\n <a\n *ngIf=\"showManageProfilesLink\"\n href=\"#\"\n (click)=\"onManageProfiles($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n Manage<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && profiles.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-test-data-profile-card\n *ngFor=\"let p of profiles; trackBy: trackByAttachmentId\"\n [name]=\"p.name\"\n [rowsCount]=\"p.rowsCount\"\n [columnsCount]=\"p.columnsCount\"\n [environmentName]=\"environmentName\"\n [permission]=\"p.permission\"\n [activeOnTestCase]=\"p.activeOnTestCase\">\n </cqa-test-data-profile-card>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && !profiles.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"!hasEnvironment; else noAttachments\">\n Set an environment on this test case to see its test data profiles.\n </ng-container>\n <ng-template #noAttachments>\n <ng-container *ngIf=\"searchTerm; else noProfilesAtAll\">\n No profiles match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noProfilesAtAll>No test data profiles attached to this environment yet.</ng-template>\n </ng-template>\n </div>\n\n <div *ngIf=\"isLoadingProfiles\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading test data profiles\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-12 cqa-rounded-full cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: ElementCardComponent, selector: "cqa-element-card", inputs: ["name", "screen", "updatedRelative", "locatorBadge", "selected"], outputs: ["cardClick"] }, { type: TestDataProfileCardComponent, selector: "cqa-test-data-profile-card", inputs: ["name", "rowsCount", "columnsCount", "environmentName", "permission", "activeOnTestCase"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DataLibraryPanelComponent, decorators: [{
|
|
52961
|
+
type: Component,
|
|
52962
|
+
args: [{ selector: 'cqa-data-library-panel', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-bg-white\">\n <!-- Sticky region: search + env banner + segment. position:sticky pins inside the\n host scroll container (cqa-detail-side-panel scrolls our content) so only the\n cards below scroll past while these stay anchored. -->\n <div class=\"cqa-sticky cqa-top-0 cqa-z-10 cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2 cqa-pb-3 cqa-bg-white\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchTerm\"\n [showClear]=\"true\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\"\n (search)=\"onSearchSubmit($event)\"\n (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n\n <div class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F8FAFC] cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-md cqa-px-3 cqa-py-2\">\n Showing data for <span class=\"cqa-font-semibold cqa-text-[#0F172A]\">{{ bannerLabel }}</span> Environment\n </div>\n\n <cqa-segment-control\n [segments]=\"segments\"\n [value]=\"activeSubTab\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Scrollable region: section header + cards / empty / loading.\n Scrolling is owned by the host's scroll container; this div is just a normal block. -->\n <div class=\"cqa-pt-3 cqa-pb-6\">\n <ng-container *ngIf=\"activeSubTab === 'elements'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Elements</span>\n <a\n *ngIf=\"showElementsLink\"\n href=\"#\"\n (click)=\"onViewFullElements($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n View full library<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingElements && elements.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-element-card\n *ngFor=\"let el of elements; trackBy: trackByElementId\"\n [name]=\"el.name\"\n [screen]=\"el.screen\"\n [updatedRelative]=\"el.updatedRelative\"\n [locatorBadge]=\"el.locatorBadge\"\n [selected]=\"selectedElementId === el.id\"\n (cardClick)=\"onElementClick(el.id)\">\n </cqa-element-card>\n </div>\n\n <div *ngIf=\"!isLoadingElements && !elements.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"searchTerm; else noElementsAtAll\">\n No elements match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noElementsAtAll>No elements yet for this workspace.</ng-template>\n </div>\n\n <div *ngIf=\"isLoadingElements\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading elements\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-2 cqa-w-1/4 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"activeSubTab === 'profiles'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Test Data Profiles</span>\n <a\n *ngIf=\"showManageProfilesLink\"\n href=\"#\"\n (click)=\"onManageProfiles($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n Manage<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && profiles.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-test-data-profile-card\n *ngFor=\"let p of profiles; trackBy: trackByAttachmentId\"\n [name]=\"p.name\"\n [rowsCount]=\"p.rowsCount\"\n [columnsCount]=\"p.columnsCount\"\n [environmentName]=\"environmentName\"\n [permission]=\"p.permission\"\n [activeOnTestCase]=\"p.activeOnTestCase\">\n </cqa-test-data-profile-card>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && !profiles.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"!hasEnvironment; else noAttachments\">\n Set an environment on this test case to see its test data profiles.\n </ng-container>\n <ng-template #noAttachments>\n <ng-container *ngIf=\"searchTerm; else noProfilesAtAll\">\n No profiles match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noProfilesAtAll>No test data profiles attached to this environment yet.</ng-template>\n </ng-template>\n </div>\n\n <div *ngIf=\"isLoadingProfiles\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading test data profiles\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-12 cqa-rounded-full cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n" }]
|
|
52963
|
+
}], propDecorators: { searchTerm: [{
|
|
52964
|
+
type: Input
|
|
52965
|
+
}], searchPlaceholder: [{
|
|
52966
|
+
type: Input
|
|
52967
|
+
}], environmentName: [{
|
|
52968
|
+
type: Input
|
|
52969
|
+
}], activeSubTab: [{
|
|
52970
|
+
type: Input
|
|
52971
|
+
}], elements: [{
|
|
52972
|
+
type: Input
|
|
52973
|
+
}], profiles: [{
|
|
52974
|
+
type: Input
|
|
52975
|
+
}], isLoadingElements: [{
|
|
52976
|
+
type: Input
|
|
52977
|
+
}], isLoadingProfiles: [{
|
|
52978
|
+
type: Input
|
|
52979
|
+
}], selectedElementId: [{
|
|
52980
|
+
type: Input
|
|
52981
|
+
}], hasEnvironment: [{
|
|
52982
|
+
type: Input
|
|
52983
|
+
}], showElementsLink: [{
|
|
52984
|
+
type: Input
|
|
52985
|
+
}], showManageProfilesLink: [{
|
|
52986
|
+
type: Input
|
|
52987
|
+
}], searchTermChange: [{
|
|
52988
|
+
type: Output
|
|
52989
|
+
}], search: [{
|
|
52990
|
+
type: Output
|
|
52991
|
+
}], searchCleared: [{
|
|
52992
|
+
type: Output
|
|
52993
|
+
}], activeSubTabChange: [{
|
|
52994
|
+
type: Output
|
|
52995
|
+
}], elementCardClick: [{
|
|
52996
|
+
type: Output
|
|
52997
|
+
}], viewFullElementsClick: [{
|
|
52998
|
+
type: Output
|
|
52999
|
+
}], manageProfilesClick: [{
|
|
53000
|
+
type: Output
|
|
53001
|
+
}] } });
|
|
53002
|
+
|
|
52176
53003
|
class UiKitModule {
|
|
52177
53004
|
constructor(iconRegistry) {
|
|
52178
53005
|
iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
@@ -52277,6 +53104,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
52277
53104
|
CaptureVideoDialogComponent,
|
|
52278
53105
|
SubStepsConfirmationDialogComponent,
|
|
52279
53106
|
NewGlobalVariableDialogComponent,
|
|
53107
|
+
GlobalVariableTagsInputComponent,
|
|
52280
53108
|
NewEnvironmentDialogComponent,
|
|
52281
53109
|
NewEnvironmentVariableDialogComponent,
|
|
52282
53110
|
NewDbConfigDialogComponent,
|
|
@@ -52348,7 +53176,10 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
52348
53176
|
VersionHistoryCompareComponent,
|
|
52349
53177
|
VersionHistoryDetailComponent,
|
|
52350
53178
|
VersionHistoryRestoreConfirmComponent,
|
|
52351
|
-
NewVersionHistoryDetailComponent
|
|
53179
|
+
NewVersionHistoryDetailComponent,
|
|
53180
|
+
DataLibraryPanelComponent,
|
|
53181
|
+
ElementCardComponent,
|
|
53182
|
+
TestDataProfileCardComponent], imports: [CommonModule,
|
|
52352
53183
|
FormsModule,
|
|
52353
53184
|
ReactiveFormsModule,
|
|
52354
53185
|
NoopAnimationsModule,
|
|
@@ -52471,6 +53302,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
52471
53302
|
CaptureVideoDialogComponent,
|
|
52472
53303
|
SubStepsConfirmationDialogComponent,
|
|
52473
53304
|
NewGlobalVariableDialogComponent,
|
|
53305
|
+
GlobalVariableTagsInputComponent,
|
|
52474
53306
|
NewEnvironmentDialogComponent,
|
|
52475
53307
|
NewEnvironmentVariableDialogComponent,
|
|
52476
53308
|
NewDbConfigDialogComponent,
|
|
@@ -52538,7 +53370,10 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
52538
53370
|
VersionHistoryCompareComponent,
|
|
52539
53371
|
VersionHistoryDetailComponent,
|
|
52540
53372
|
VersionHistoryRestoreConfirmComponent,
|
|
52541
|
-
NewVersionHistoryDetailComponent
|
|
53373
|
+
NewVersionHistoryDetailComponent,
|
|
53374
|
+
DataLibraryPanelComponent,
|
|
53375
|
+
ElementCardComponent,
|
|
53376
|
+
TestDataProfileCardComponent] });
|
|
52542
53377
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
52543
53378
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer },
|
|
52544
53379
|
{
|
|
@@ -52710,6 +53545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52710
53545
|
CaptureVideoDialogComponent,
|
|
52711
53546
|
SubStepsConfirmationDialogComponent,
|
|
52712
53547
|
NewGlobalVariableDialogComponent,
|
|
53548
|
+
GlobalVariableTagsInputComponent,
|
|
52713
53549
|
NewEnvironmentDialogComponent,
|
|
52714
53550
|
NewEnvironmentVariableDialogComponent,
|
|
52715
53551
|
NewDbConfigDialogComponent,
|
|
@@ -52782,6 +53618,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52782
53618
|
VersionHistoryDetailComponent,
|
|
52783
53619
|
VersionHistoryRestoreConfirmComponent,
|
|
52784
53620
|
NewVersionHistoryDetailComponent,
|
|
53621
|
+
DataLibraryPanelComponent,
|
|
53622
|
+
ElementCardComponent,
|
|
53623
|
+
TestDataProfileCardComponent,
|
|
52785
53624
|
],
|
|
52786
53625
|
imports: [
|
|
52787
53626
|
CommonModule,
|
|
@@ -52910,6 +53749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52910
53749
|
CaptureVideoDialogComponent,
|
|
52911
53750
|
SubStepsConfirmationDialogComponent,
|
|
52912
53751
|
NewGlobalVariableDialogComponent,
|
|
53752
|
+
GlobalVariableTagsInputComponent,
|
|
52913
53753
|
NewEnvironmentDialogComponent,
|
|
52914
53754
|
NewEnvironmentVariableDialogComponent,
|
|
52915
53755
|
NewDbConfigDialogComponent,
|
|
@@ -52978,6 +53818,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52978
53818
|
VersionHistoryDetailComponent,
|
|
52979
53819
|
VersionHistoryRestoreConfirmComponent,
|
|
52980
53820
|
NewVersionHistoryDetailComponent,
|
|
53821
|
+
DataLibraryPanelComponent,
|
|
53822
|
+
ElementCardComponent,
|
|
53823
|
+
TestDataProfileCardComponent,
|
|
52981
53824
|
],
|
|
52982
53825
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
52983
53826
|
providers: [
|
|
@@ -53551,6 +54394,7 @@ const TEST_CASE_DETAILS_FIELD_MAP = {
|
|
|
53551
54394
|
},
|
|
53552
54395
|
/** Execution config */
|
|
53553
54396
|
execution: {
|
|
54397
|
+
environment: 'environment',
|
|
53554
54398
|
prerequisiteCase: 'prerequisiteCase',
|
|
53555
54399
|
defaultBrowser: 'defaultBrowser',
|
|
53556
54400
|
videoRecording: 'videoRecording',
|
|
@@ -53586,7 +54430,7 @@ const TEST_CASE_DETAILS_FIELD_MAP = {
|
|
|
53586
54430
|
* Use in ts-portal when mapping test case API response to component inputs.
|
|
53587
54431
|
*/
|
|
53588
54432
|
function buildTestCaseDetailsFromApi(data, options) {
|
|
53589
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
54433
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
53590
54434
|
const formatDate = (v) => {
|
|
53591
54435
|
if (!v)
|
|
53592
54436
|
return '';
|
|
@@ -53625,9 +54469,10 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53625
54469
|
title: 'Execution',
|
|
53626
54470
|
icon: 'play_circle',
|
|
53627
54471
|
items: [
|
|
53628
|
-
{ label: '
|
|
53629
|
-
{ label: '
|
|
53630
|
-
{ label: 'Test Data
|
|
54472
|
+
{ label: 'Environment', value: (_b = (_a = data.environment) !== null && _a !== void 0 ? _a : data.environmentId) !== null && _b !== void 0 ? _b : null },
|
|
54473
|
+
{ label: 'Type', value: (_d = (_c = data.type) !== null && _c !== void 0 ? _c : data.typeId) !== null && _d !== void 0 ? _d : null },
|
|
54474
|
+
{ label: 'Test Data Profile', value: (_f = (_e = data.testDataProfile) !== null && _e !== void 0 ? _e : data.testDataProfileId) !== null && _f !== void 0 ? _f : null },
|
|
54475
|
+
{ label: 'Test Data Set', value: (_h = (_g = data.testDataSet) !== null && _g !== void 0 ? _g : data.testDataSetIndex) !== null && _h !== void 0 ? _h : null },
|
|
53631
54476
|
// { label: 'Video Recording', value: data.videoRecording ?? '' },
|
|
53632
54477
|
],
|
|
53633
54478
|
},
|
|
@@ -53635,10 +54480,10 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53635
54480
|
title: 'AI Configuration',
|
|
53636
54481
|
icon: 'smart_toy',
|
|
53637
54482
|
items: [
|
|
53638
|
-
{ label: 'Enable AI Smartness', value: (
|
|
53639
|
-
{ label: 'Default AI Action', value: (
|
|
53640
|
-
{ label: 'Knowledge Base Default Test Case', value: (
|
|
53641
|
-
{ label: 'Enable AI metadata collection', value: (
|
|
54483
|
+
{ label: 'Enable AI Smartness', value: (_j = data.enableAiSmartness) !== null && _j !== void 0 ? _j : '' },
|
|
54484
|
+
{ label: 'Default AI Action', value: (_k = data.defaultAiAction) !== null && _k !== void 0 ? _k : '' },
|
|
54485
|
+
{ label: 'Knowledge Base Default Test Case', value: (_l = data.knowledgeBaseDefaultTestCase) !== null && _l !== void 0 ? _l : null },
|
|
54486
|
+
{ label: 'Enable AI metadata collection', value: (_m = data.useAiMetadata) !== null && _m !== void 0 ? _m : '' },
|
|
53642
54487
|
],
|
|
53643
54488
|
},
|
|
53644
54489
|
];
|
|
@@ -53647,10 +54492,10 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53647
54492
|
title: 'Wait and retries',
|
|
53648
54493
|
icon: 'timer',
|
|
53649
54494
|
items: [
|
|
53650
|
-
{ label: 'Enable Avoid Auto wait for steps', value: (
|
|
53651
|
-
{ label: 'Retry Failed Steps', value: (
|
|
53652
|
-
{ label: 'Test Case Timeout (minutes)', value: (
|
|
53653
|
-
{ label: 'Wait Timeout for Locators (secs)', value: (
|
|
54495
|
+
{ label: 'Enable Avoid Auto wait for steps', value: (_o = data.autoWaitEnabled) !== null && _o !== void 0 ? _o : false },
|
|
54496
|
+
{ label: 'Retry Failed Steps', value: (_p = data.retryFailedSteps) !== null && _p !== void 0 ? _p : '' },
|
|
54497
|
+
{ label: 'Test Case Timeout (minutes)', value: (_q = data.testCaseTimeout) !== null && _q !== void 0 ? _q : '' },
|
|
54498
|
+
{ label: 'Wait Timeout for Locators (secs)', value: (_r = data.waitTimeoutForLocators) !== null && _r !== void 0 ? _r : '' },
|
|
53654
54499
|
],
|
|
53655
54500
|
},
|
|
53656
54501
|
{
|
|
@@ -53675,9 +54520,9 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53675
54520
|
title: 'Key Flags',
|
|
53676
54521
|
icon: 'flag',
|
|
53677
54522
|
items: [
|
|
53678
|
-
{ label: 'Mobile Testing', value: (
|
|
53679
|
-
{ label: 'Extension Use', value: (
|
|
53680
|
-
{ label: 'Data Driven', value: (
|
|
54523
|
+
{ label: 'Mobile Testing', value: (_s = data.mobileTesting) !== null && _s !== void 0 ? _s : '' },
|
|
54524
|
+
{ label: 'Extension Use', value: (_t = data.extensionUse) !== null && _t !== void 0 ? _t : '' },
|
|
54525
|
+
{ label: 'Data Driven', value: (_u = data.dataDriven) !== null && _u !== void 0 ? _u : '' },
|
|
53681
54526
|
],
|
|
53682
54527
|
},
|
|
53683
54528
|
];
|
|
@@ -53689,7 +54534,7 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53689
54534
|
: configSectionsRow2;
|
|
53690
54535
|
return {
|
|
53691
54536
|
metadataItems,
|
|
53692
|
-
labels: (
|
|
54537
|
+
labels: (_v = data.labels) !== null && _v !== void 0 ? _v : [],
|
|
53693
54538
|
configSections,
|
|
53694
54539
|
configSectionsRow2: filteredConfigSectionsRow2,
|
|
53695
54540
|
};
|
|
@@ -53699,5 +54544,5 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53699
54544
|
* Generated bundle index. Do not edit.
|
|
53700
54545
|
*/
|
|
53701
54546
|
|
|
53702
|
-
export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, 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, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
|
|
54547
|
+
export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DataLibraryPanelComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, 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, ENVIRONMENT_ACCENT_COLORS, ElementCardComponent, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, GlobalVariableTagsInputComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDataProfileCardComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
|
|
53703
54548
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|