@cqa-lib/cqa-ui 1.1.537-gamma.5 → 1.1.538
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 +1 -8
- 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 +10 -30
- package/esm2020/lib/new-global-variable-dialog/new-global-variable-dialog.component.mjs +5 -16
- package/esm2020/lib/new-global-variable-dialog/new-global-variable-dialog.models.mjs +1 -1
- package/esm2020/lib/segment-control/segment-control.component.mjs +4 -12
- package/esm2020/lib/step-builder/step-builder-action/step-builder-action.component.mjs +3 -17
- package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs +3 -17
- package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +3 -12
- package/esm2020/lib/step-builder/template-variables-form/template-variables-form.component.mjs +27 -315
- package/esm2020/lib/templates/modular-table-template/folder-sidebar/folder-sidebar.component.mjs +3 -3
- package/esm2020/lib/templates/modular-table-template/modular-table-template.component.mjs +3 -3
- package/esm2020/lib/templates/modular-table-template/modular-table-template.models.mjs +2 -1
- package/esm2020/lib/templates/table-template.component.mjs +3 -5
- package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +4 -43
- package/esm2020/lib/test-case-details/test-case-details.models.mjs +1 -3
- package/esm2020/lib/ui-kit.module.mjs +1 -6
- package/esm2020/public-api.mjs +1 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs +121 -664
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +58 -591
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/new-global-variable-dialog/new-global-variable-dialog.component.d.ts +2 -5
- package/lib/new-global-variable-dialog/new-global-variable-dialog.models.d.ts +0 -8
- package/lib/segment-control/segment-control.component.d.ts +1 -3
- package/lib/step-builder/step-builder-action/step-builder-action.component.d.ts +1 -15
- package/lib/step-builder/step-builder-condition/step-builder-condition.component.d.ts +1 -15
- package/lib/step-builder/step-builder-loop/step-builder-loop.component.d.ts +1 -11
- package/lib/step-builder/template-variables-form/template-variables-form.component.d.ts +4 -71
- package/lib/templates/modular-table-template/modular-table-template.models.d.ts +2 -0
- package/lib/templates/table-template.component.d.ts +1 -8
- package/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.d.ts +0 -7
- package/lib/test-case-details/test-case-details.models.d.ts +0 -2
- package/lib/ui-kit.module.d.ts +96 -97
- package/package.json +1 -1
- package/public-api.d.ts +0 -1
- package/styles.css +1 -1
- package/esm2020/lib/new-global-variable-dialog/global-variable-tags-input.component.mjs +0 -129
- package/lib/new-global-variable-dialog/global-variable-tags-input.component.d.ts +0 -39
|
@@ -619,8 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
619
619
|
}] } });
|
|
620
620
|
|
|
621
621
|
class SegmentControlComponent {
|
|
622
|
-
constructor(
|
|
623
|
-
this.cdr = cdr;
|
|
622
|
+
constructor() {
|
|
624
623
|
this.segments = [
|
|
625
624
|
{ label: 'Tab Group', value: 'tab-group-1' },
|
|
626
625
|
{ label: 'Tab Group', value: 'tab-group-2' },
|
|
@@ -796,24 +795,18 @@ class SegmentControlComponent {
|
|
|
796
795
|
if (!container || buttons.length === 0) {
|
|
797
796
|
this.indicatorVisible = false;
|
|
798
797
|
this.indicatorStyle = {};
|
|
799
|
-
// OnPush parents (e.g. template-variables-form) won't tick this child
|
|
800
|
-
// automatically when its own state mutates inside a microtask — explicit
|
|
801
|
-
// markForCheck is required for the indicator binding to update.
|
|
802
|
-
this.cdr.markForCheck();
|
|
803
798
|
return;
|
|
804
799
|
}
|
|
805
800
|
const index = preferredIndex ?? buttons.findIndex((button, idx) => this.segments[idx]?.value === this.value);
|
|
806
801
|
if (index === -1) {
|
|
807
802
|
this.indicatorVisible = false;
|
|
808
803
|
this.indicatorStyle = {};
|
|
809
|
-
this.cdr.markForCheck();
|
|
810
804
|
return;
|
|
811
805
|
}
|
|
812
806
|
const buttonEl = buttons[index]?.nativeElement;
|
|
813
807
|
if (!buttonEl) {
|
|
814
808
|
this.indicatorVisible = false;
|
|
815
809
|
this.indicatorStyle = {};
|
|
816
|
-
this.cdr.markForCheck();
|
|
817
810
|
return;
|
|
818
811
|
}
|
|
819
812
|
const containerRect = container.getBoundingClientRect();
|
|
@@ -831,19 +824,18 @@ class SegmentControlComponent {
|
|
|
831
824
|
backgroundColor: isDisabled ? '#9BA0F4' : '#3F43EE',
|
|
832
825
|
};
|
|
833
826
|
this.indicatorVisible = true;
|
|
834
|
-
this.cdr.markForCheck();
|
|
835
827
|
});
|
|
836
828
|
}
|
|
837
829
|
get isIndicatorVisible() {
|
|
838
830
|
return this.indicatorVisible;
|
|
839
831
|
}
|
|
840
832
|
}
|
|
841
|
-
SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [
|
|
833
|
+
SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
842
834
|
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"] }] });
|
|
843
835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
|
|
844
836
|
type: Component,
|
|
845
837
|
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: [] }]
|
|
846
|
-
}],
|
|
838
|
+
}], propDecorators: { segments: [{
|
|
847
839
|
type: Input
|
|
848
840
|
}], value: [{
|
|
849
841
|
type: Input
|
|
@@ -7609,10 +7601,10 @@ class TableTemplateComponent {
|
|
|
7609
7601
|
}
|
|
7610
7602
|
}
|
|
7611
7603
|
TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7612
|
-
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 });
|
|
7604
|
+
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 });
|
|
7613
7605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
|
|
7614
7606
|
type: Component,
|
|
7615
|
-
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 <
|
|
7607
|
+
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 \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: [] }]
|
|
7616
7608
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPlaceholder: [{
|
|
7617
7609
|
type: Input
|
|
7618
7610
|
}], searchValue: [{
|
|
@@ -7651,8 +7643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
7651
7643
|
type: Input
|
|
7652
7644
|
}], otherSelectDropDownButtons: [{
|
|
7653
7645
|
type: Input
|
|
7654
|
-
}], tagFilterTemplate: [{
|
|
7655
|
-
type: Input
|
|
7656
7646
|
}], otherButtonLabel: [{
|
|
7657
7647
|
type: Input
|
|
7658
7648
|
}], otherButtonVariant: [{
|
|
@@ -7824,6 +7814,7 @@ const DEFAULT_MODULAR_LABELS = {
|
|
|
7824
7814
|
emptyNoTestsInFolderDescription: 'This folder does not contain any test cases yet.',
|
|
7825
7815
|
folderColumnLabel: 'Folder',
|
|
7826
7816
|
unorganisedRowLabel: 'Unorganised',
|
|
7817
|
+
noFoldersFound: 'No Folders Found',
|
|
7827
7818
|
};
|
|
7828
7819
|
const DEFAULT_REORDER_LABELS = {
|
|
7829
7820
|
reorderButton: 'Reorder',
|
|
@@ -9403,10 +9394,10 @@ class FolderSidebarComponent {
|
|
|
9403
9394
|
}
|
|
9404
9395
|
FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
|
|
9405
9396
|
FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9406
|
-
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" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", 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 <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing) -->\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 <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <div\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 </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"] }], 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 });
|
|
9397
|
+
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" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", 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 <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing) -->\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 <div\n *ngIf=\"searchValue?.trim() && rows.length === 0\"\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 <div\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 </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"] }], 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 });
|
|
9407
9398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
|
|
9408
9399
|
type: Component,
|
|
9409
|
-
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 <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing) -->\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 <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <div\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 </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: [] }]
|
|
9400
|
+
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 <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing) -->\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 <div\n *ngIf=\"searchValue?.trim() && rows.length === 0\"\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 <div\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 </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: [] }]
|
|
9410
9401
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
|
|
9411
9402
|
type: Input
|
|
9412
9403
|
}], selectedFolderId: [{
|
|
@@ -10824,10 +10815,10 @@ class ModularTableTemplateComponent {
|
|
|
10824
10815
|
}
|
|
10825
10816
|
}
|
|
10826
10817
|
ModularTableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModularTableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10827
|
-
ModularTableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModularTableTemplateComponent, selector: "cqa-modular-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", folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", useInternalDialogs: "useInternalDialogs", showReorderButton: "showReorderButton", reorderSaving: "reorderSaving", reorderLabels: "reorderLabels", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", testsMoved: "testsMoved", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", bulkActionInvoked: "bulkActionInvoked", sidebarCollapsedChange: "sidebarCollapsedChange", reorderStart: "reorderStart", reorderCancel: "reorderCancel", reorderSave: "reorderSave", moveRequested: "moveRequested", selectedItemsChange: "selectedItemsChange", folderDeleteRequested: "folderDeleteRequested", folderMoveRequested: "folderMoveRequested", folderMoved: "folderMoved", folderDuplicateRequested: "folderDuplicateRequested", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip\"></ng-container>. -->\n<ng-template #folderIconChip>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n </svg>\n </span>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<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 [disabled]=\"isReordering\"\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 [disabled]=\"isReordering\"\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 <cqa-button\n *ngIf=\"showReorderButton && !isReordering\"\n variant=\"outlined\"\n icon=\"drag_indicator\"\n [text]=\"reorderLabels.reorderButton\"\n [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n (clicked)=\"startReorder()\"\n ></cqa-button>\n <ng-container *ngIf=\"showReorderButton && isReordering\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"reorderLabels.cancelButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"cancelReorder()\"\n ></cqa-button>\n <cqa-button\n variant=\"filled\"\n [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"saveReorder()\"\n ></cqa-button>\n </ng-container>\n </div>\n </div>\n\n <!-- Reorder mode banner -->\n <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\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-flex cqa-items-stretch cqa-gap-3 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n <!-- Sidebar (only shown in modular view) -->\n <cqa-folder-sidebar\n *ngIf=\"isModularView && modularConfig.showSidebar\"\n [folders]=\"folders\"\n [selectedFolderId]=\"selectedFolderId\"\n [expandedFolderIds]=\"expandedFolderIds\"\n [unorganisedCount]=\"unorganisedCount\"\n [allowCreate]=\"modularConfig.allowCreateFolder\"\n [allowRename]=\"modularConfig.allowRenameFolder\"\n [allowDelete]=\"modularConfig.allowDeleteFolder\"\n [allowDrop]=\"modularConfig.allowTestDragDrop\"\n [showCounts]=\"modularConfig.showCounts\"\n [collapsed]=\"sidebarCollapsed\"\n [labels]=\"modularLabels\"\n (folderSelected)=\"onFolderSelected($event)\"\n (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n (folderCreated)=\"onFolderCreated($event)\"\n (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n (folderRenamed)=\"onFolderRenamed($event)\"\n (folderDeleted)=\"onFolderDeleted($event)\"\n (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n (testsDropped)=\"onTestsDropped($event)\"\n (folderDropped)=\"onFolderDropped($event)\"\n (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n ></cqa-folder-sidebar>\n\n <!-- Right pane -->\n <div\n class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n >\n <!-- Breadcrumb (modular view, folder drilled-in) -->\n <nav\n *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n aria-label=\"Folder path\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n >\n <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (click)=\"onFolderSelected(null)\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n </svg>\n <span>{{ modularLabels.allFolders }}</span>\n </button>\n <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n <mat-icon class=\"cqa-align-middle\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n <button\n type=\"button\"\n [ngClass]=\"last\n ? 'cqa-text-[#161617] cqa-font-semibold'\n : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n [disabled]=\"last\"\n (click)=\"!last && onFolderSelected(crumb.id)\"\n >{{ crumb.name }}</button>\n </ng-container>\n </nav>\n\n <!-- Folder grid: modular + root view -->\n <section\n *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n style=\"border-bottom: 1px solid #F0F0F1;\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n </svg>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of rootFolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: null })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Subfolder section: modular + folder view. Shown whenever drilled in (even if no subfolders, so the \"+ New folder\" tile remains reachable). -->\n <section\n *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && subfolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-3 cqa-py-1\"\n >\n <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of subfolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n <div\n *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n </span>\n </div>\n <button\n type=\"button\"\n class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n (click)=\"onFolderSelected(null)\"\n >{{ modularLabels.clearFilter }}</button>\n </div>\n\n <!-- Unorganised section header at root view -->\n <div\n *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n >\n <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n </span>\n </div>\n\n <!-- Table -->\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 [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : 'border-bottom: none !important'\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort && !isReordering\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [enableRowReorder]=\"isReordering\"\n (rowReorder)=\"onRowReorder($event)\"\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=\"effectiveIsEmptyState\"\n [title]=\"effectiveEmptyStateConfig.title\"\n [description]=\"effectiveEmptyStateConfig.description\"\n [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n [actions]=\"effectiveEmptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\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 </div>\n </div>\n\n <!-- Reused bulk action toolbar -->\n <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" 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]=\"effectiveBulkActions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"onBulkAction($event)\"\n (selectAllChange)=\"onBulkSelectAll($event)\"\n (dismiss)=\"onBulkDismiss()\"\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: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: ["folders", "selectedFolderId", "expandedFolderIds", "unorganisedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "labels"], outputs: ["folderSelected", "folderExpansionToggled", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10818
|
+
ModularTableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModularTableTemplateComponent, selector: "cqa-modular-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", folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", useInternalDialogs: "useInternalDialogs", showReorderButton: "showReorderButton", reorderSaving: "reorderSaving", reorderLabels: "reorderLabels", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", testsMoved: "testsMoved", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", bulkActionInvoked: "bulkActionInvoked", sidebarCollapsedChange: "sidebarCollapsedChange", reorderStart: "reorderStart", reorderCancel: "reorderCancel", reorderSave: "reorderSave", moveRequested: "moveRequested", selectedItemsChange: "selectedItemsChange", folderDeleteRequested: "folderDeleteRequested", folderMoveRequested: "folderMoveRequested", folderMoved: "folderMoved", folderDuplicateRequested: "folderDuplicateRequested", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n </svg>\n </span>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<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 [disabled]=\"isReordering\"\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 [disabled]=\"isReordering\"\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 <cqa-button\n *ngIf=\"showReorderButton && !isReordering\"\n variant=\"outlined\"\n icon=\"drag_indicator\"\n [text]=\"reorderLabels.reorderButton\"\n [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n (clicked)=\"startReorder()\"\n ></cqa-button>\n <ng-container *ngIf=\"showReorderButton && isReordering\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"reorderLabels.cancelButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"cancelReorder()\"\n ></cqa-button>\n <cqa-button\n variant=\"filled\"\n [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"saveReorder()\"\n ></cqa-button>\n </ng-container>\n </div>\n </div>\n\n <!-- Reorder mode banner -->\n <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\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-flex cqa-items-stretch cqa-gap-3 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n <!-- Sidebar (only shown in modular view) -->\n <cqa-folder-sidebar\n *ngIf=\"isModularView && modularConfig.showSidebar\"\n [folders]=\"folders\"\n [selectedFolderId]=\"selectedFolderId\"\n [expandedFolderIds]=\"expandedFolderIds\"\n [unorganisedCount]=\"unorganisedCount\"\n [allowCreate]=\"modularConfig.allowCreateFolder\"\n [allowRename]=\"modularConfig.allowRenameFolder\"\n [allowDelete]=\"modularConfig.allowDeleteFolder\"\n [allowDrop]=\"modularConfig.allowTestDragDrop\"\n [showCounts]=\"modularConfig.showCounts\"\n [collapsed]=\"sidebarCollapsed\"\n [labels]=\"modularLabels\"\n (folderSelected)=\"onFolderSelected($event)\"\n (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n (folderCreated)=\"onFolderCreated($event)\"\n (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n (folderRenamed)=\"onFolderRenamed($event)\"\n (folderDeleted)=\"onFolderDeleted($event)\"\n (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n (testsDropped)=\"onTestsDropped($event)\"\n (folderDropped)=\"onFolderDropped($event)\"\n (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n ></cqa-folder-sidebar>\n\n <!-- Right pane -->\n <div\n class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n >\n <!-- Breadcrumb (modular view, folder drilled-in) -->\n <nav\n *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n aria-label=\"Folder path\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n >\n <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (click)=\"onFolderSelected(null)\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n </svg>\n <span>{{ modularLabels.allFolders }}</span>\n </button>\n <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n <mat-icon class=\"cqa-align-middle\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n <button\n type=\"button\"\n [ngClass]=\"last\n ? 'cqa-text-[#161617] cqa-font-semibold'\n : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n [disabled]=\"last\"\n (click)=\"!last && onFolderSelected(crumb.id)\"\n >{{ crumb.name }}</button>\n </ng-container>\n </nav>\n\n <!-- Folder grid: modular + root view -->\n <section\n *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n style=\"border-bottom: 1px solid #F0F0F1;\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n </svg>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of rootFolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: null })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Subfolder section: modular + folder view. Shown whenever drilled in (even if no subfolders, so the \"+ New folder\" tile remains reachable). -->\n <section\n *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && subfolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-3 cqa-py-1\"\n >\n <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of subfolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n <div\n *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n </span>\n </div>\n <button\n type=\"button\"\n class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n (click)=\"onFolderSelected(null)\"\n >{{ modularLabels.clearFilter }}</button>\n </div>\n\n <!-- Unorganised section header at root view -->\n <div\n *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n >\n <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n </span>\n </div>\n\n <!-- Table -->\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 [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : 'border-bottom: none !important'\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort && !isReordering\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [enableRowReorder]=\"isReordering\"\n (rowReorder)=\"onRowReorder($event)\"\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=\"effectiveIsEmptyState\"\n [title]=\"effectiveEmptyStateConfig.title\"\n [description]=\"effectiveEmptyStateConfig.description\"\n [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n [actions]=\"effectiveEmptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\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 </div>\n </div>\n\n <!-- Reused bulk action toolbar -->\n <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" 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]=\"effectiveBulkActions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"onBulkAction($event)\"\n (selectAllChange)=\"onBulkSelectAll($event)\"\n (dismiss)=\"onBulkDismiss()\"\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: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: ["folders", "selectedFolderId", "expandedFolderIds", "unorganisedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "labels"], outputs: ["folderSelected", "folderExpansionToggled", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10828
10819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModularTableTemplateComponent, decorators: [{
|
|
10829
10820
|
type: Component,
|
|
10830
|
-
args: [{ selector: 'cqa-modular-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip\"></ng-container>. -->\n<ng-template #folderIconChip>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n </svg>\n </span>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<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 [disabled]=\"isReordering\"\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 [disabled]=\"isReordering\"\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 <cqa-button\n *ngIf=\"showReorderButton && !isReordering\"\n variant=\"outlined\"\n icon=\"drag_indicator\"\n [text]=\"reorderLabels.reorderButton\"\n [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n (clicked)=\"startReorder()\"\n ></cqa-button>\n <ng-container *ngIf=\"showReorderButton && isReordering\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"reorderLabels.cancelButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"cancelReorder()\"\n ></cqa-button>\n <cqa-button\n variant=\"filled\"\n [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"saveReorder()\"\n ></cqa-button>\n </ng-container>\n </div>\n </div>\n\n <!-- Reorder mode banner -->\n <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\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-flex cqa-items-stretch cqa-gap-3 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n <!-- Sidebar (only shown in modular view) -->\n <cqa-folder-sidebar\n *ngIf=\"isModularView && modularConfig.showSidebar\"\n [folders]=\"folders\"\n [selectedFolderId]=\"selectedFolderId\"\n [expandedFolderIds]=\"expandedFolderIds\"\n [unorganisedCount]=\"unorganisedCount\"\n [allowCreate]=\"modularConfig.allowCreateFolder\"\n [allowRename]=\"modularConfig.allowRenameFolder\"\n [allowDelete]=\"modularConfig.allowDeleteFolder\"\n [allowDrop]=\"modularConfig.allowTestDragDrop\"\n [showCounts]=\"modularConfig.showCounts\"\n [collapsed]=\"sidebarCollapsed\"\n [labels]=\"modularLabels\"\n (folderSelected)=\"onFolderSelected($event)\"\n (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n (folderCreated)=\"onFolderCreated($event)\"\n (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n (folderRenamed)=\"onFolderRenamed($event)\"\n (folderDeleted)=\"onFolderDeleted($event)\"\n (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n (testsDropped)=\"onTestsDropped($event)\"\n (folderDropped)=\"onFolderDropped($event)\"\n (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n ></cqa-folder-sidebar>\n\n <!-- Right pane -->\n <div\n class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n >\n <!-- Breadcrumb (modular view, folder drilled-in) -->\n <nav\n *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n aria-label=\"Folder path\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n >\n <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (click)=\"onFolderSelected(null)\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n </svg>\n <span>{{ modularLabels.allFolders }}</span>\n </button>\n <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n <mat-icon class=\"cqa-align-middle\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n <button\n type=\"button\"\n [ngClass]=\"last\n ? 'cqa-text-[#161617] cqa-font-semibold'\n : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n [disabled]=\"last\"\n (click)=\"!last && onFolderSelected(crumb.id)\"\n >{{ crumb.name }}</button>\n </ng-container>\n </nav>\n\n <!-- Folder grid: modular + root view -->\n <section\n *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n style=\"border-bottom: 1px solid #F0F0F1;\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n </svg>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of rootFolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: null })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Subfolder section: modular + folder view. Shown whenever drilled in (even if no subfolders, so the \"+ New folder\" tile remains reachable). -->\n <section\n *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && subfolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-3 cqa-py-1\"\n >\n <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of subfolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n <div\n *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n </span>\n </div>\n <button\n type=\"button\"\n class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n (click)=\"onFolderSelected(null)\"\n >{{ modularLabels.clearFilter }}</button>\n </div>\n\n <!-- Unorganised section header at root view -->\n <div\n *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n >\n <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n </span>\n </div>\n\n <!-- Table -->\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 [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : 'border-bottom: none !important'\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort && !isReordering\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [enableRowReorder]=\"isReordering\"\n (rowReorder)=\"onRowReorder($event)\"\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=\"effectiveIsEmptyState\"\n [title]=\"effectiveEmptyStateConfig.title\"\n [description]=\"effectiveEmptyStateConfig.description\"\n [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n [actions]=\"effectiveEmptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\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 </div>\n </div>\n\n <!-- Reused bulk action toolbar -->\n <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" 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]=\"effectiveBulkActions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"onBulkAction($event)\"\n (selectAllChange)=\"onBulkSelectAll($event)\"\n (dismiss)=\"onBulkDismiss()\"\n ></cqa-table-action-toolbar>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
|
|
10821
|
+
args: [{ selector: 'cqa-modular-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n </svg>\n </span>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<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 [disabled]=\"isReordering\"\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 [disabled]=\"isReordering\"\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 <cqa-button\n *ngIf=\"showReorderButton && !isReordering\"\n variant=\"outlined\"\n icon=\"drag_indicator\"\n [text]=\"reorderLabels.reorderButton\"\n [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n (clicked)=\"startReorder()\"\n ></cqa-button>\n <ng-container *ngIf=\"showReorderButton && isReordering\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"reorderLabels.cancelButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"cancelReorder()\"\n ></cqa-button>\n <cqa-button\n variant=\"filled\"\n [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n [disabled]=\"reorderSaving\"\n (clicked)=\"saveReorder()\"\n ></cqa-button>\n </ng-container>\n </div>\n </div>\n\n <!-- Reorder mode banner -->\n <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\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-flex cqa-items-stretch cqa-gap-3 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n <!-- Sidebar (only shown in modular view) -->\n <cqa-folder-sidebar\n *ngIf=\"isModularView && modularConfig.showSidebar\"\n [folders]=\"folders\"\n [selectedFolderId]=\"selectedFolderId\"\n [expandedFolderIds]=\"expandedFolderIds\"\n [unorganisedCount]=\"unorganisedCount\"\n [allowCreate]=\"modularConfig.allowCreateFolder\"\n [allowRename]=\"modularConfig.allowRenameFolder\"\n [allowDelete]=\"modularConfig.allowDeleteFolder\"\n [allowDrop]=\"modularConfig.allowTestDragDrop\"\n [showCounts]=\"modularConfig.showCounts\"\n [collapsed]=\"sidebarCollapsed\"\n [labels]=\"modularLabels\"\n (folderSelected)=\"onFolderSelected($event)\"\n (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n (folderCreated)=\"onFolderCreated($event)\"\n (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n (folderRenamed)=\"onFolderRenamed($event)\"\n (folderDeleted)=\"onFolderDeleted($event)\"\n (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n (testsDropped)=\"onTestsDropped($event)\"\n (folderDropped)=\"onFolderDropped($event)\"\n (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n ></cqa-folder-sidebar>\n\n <!-- Right pane -->\n <div\n class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n >\n <!-- Breadcrumb (modular view, folder drilled-in) -->\n <nav\n *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n aria-label=\"Folder path\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n >\n <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (click)=\"onFolderSelected(null)\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n </svg>\n <span>{{ modularLabels.allFolders }}</span>\n </button>\n <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n <mat-icon class=\"cqa-align-middle\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n <button\n type=\"button\"\n [ngClass]=\"last\n ? 'cqa-text-[#161617] cqa-font-semibold'\n : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n [disabled]=\"last\"\n (click)=\"!last && onFolderSelected(crumb.id)\"\n >{{ crumb.name }}</button>\n </ng-container>\n </nav>\n\n <!-- Folder grid: modular + root view -->\n <section\n *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n style=\"border-bottom: 1px solid #F0F0F1;\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n </svg>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of rootFolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: null })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Subfolder section: modular + folder view. Shown whenever drilled in (even if no subfolders, so the \"+ New folder\" tile remains reachable). -->\n <section\n *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && subfolderTiles.length\"\n class=\"cqa-mb-4 cqa-px-3 cqa-py-1\"\n >\n <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n </div>\n <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\">\n <button\n *ngFor=\"let f of subfolderTiles\"\n type=\"button\"\n [cqaFolderDrop]=\"f.id\"\n [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n (testsDropped)=\"onTestsDropped($event)\"\n (click)=\"onFolderSelected(f.id)\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n </span>\n </div>\n </div>\n <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n </button>\n\n <!-- \"+ New folder\" tile -->\n <button\n *ngIf=\"modularConfig.allowCreateFolder\"\n type=\"button\"\n (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n >\n <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n </div>\n </button>\n </div>\n </section>\n\n <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n <div\n *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n </svg>\n <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n </span>\n </div>\n <button\n type=\"button\"\n class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n (click)=\"onFolderSelected(null)\"\n >{{ modularLabels.clearFilter }}</button>\n </div>\n\n <!-- Unorganised section header at root view -->\n <div\n *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n >\n <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganised }}</h3>\n <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n </span>\n </div>\n\n <!-- Table -->\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 [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : 'border-bottom: none !important'\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [rowSelectable]=\"rowSelectable\"\n [enableLocalSort]=\"enableLocalSort && !isReordering\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [cellJsonPathGetter]=\"cellJsonPathGetter\"\n [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n [enableRowReorder]=\"isReordering\"\n (rowReorder)=\"onRowReorder($event)\"\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=\"effectiveIsEmptyState\"\n [title]=\"effectiveEmptyStateConfig.title\"\n [description]=\"effectiveEmptyStateConfig.description\"\n [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n [actions]=\"effectiveEmptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\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 </div>\n </div>\n\n <!-- Reused bulk action toolbar -->\n <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" 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]=\"effectiveBulkActions\"\n [showSelectAll]=\"showSelectAllInToolbar\"\n [allSelected]=\"allSelectedInToolbar\"\n [showDismiss]=\"showDismissInToolbar\"\n (actionClick)=\"onBulkAction($event)\"\n (selectAllChange)=\"onBulkSelectAll($event)\"\n (dismiss)=\"onBulkDismiss()\"\n ></cqa-table-action-toolbar>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
|
|
10831
10822
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DialogService }]; }, propDecorators: { searchPlaceholder: [{
|
|
10832
10823
|
type: Input
|
|
10833
10824
|
}], searchValue: [{
|
|
@@ -24071,7 +24062,7 @@ class CompareRunsComponent {
|
|
|
24071
24062
|
}
|
|
24072
24063
|
}
|
|
24073
24064
|
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 });
|
|
24074
|
-
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 });
|
|
24065
|
+
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 });
|
|
24075
24066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
|
|
24076
24067
|
type: Component,
|
|
24077
24068
|
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: [] }]
|
|
@@ -24283,7 +24274,7 @@ class IterationsLoopComponent {
|
|
|
24283
24274
|
}
|
|
24284
24275
|
}
|
|
24285
24276
|
IterationsLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24286
|
-
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", "
|
|
24277
|
+
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"] }] });
|
|
24287
24278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, decorators: [{
|
|
24288
24279
|
type: Component,
|
|
24289
24280
|
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: [] }]
|
|
@@ -24346,15 +24337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
24346
24337
|
|
|
24347
24338
|
const VAR_PATH = '[A-Za-z_][A-Za-z0-9_]*(?:\\.[A-Za-z_][A-Za-z0-9_]*|\\[\\d+\\])*';
|
|
24348
24339
|
const VAR_NAME_REGEX = new RegExp('^' + VAR_PATH + '$');
|
|
24349
|
-
|
|
24350
|
-
* Token regex recognizes two wrappers:
|
|
24351
|
-
* - `${name}` → local (default chip)
|
|
24352
|
-
* - `{{name}}` → Global Data
|
|
24353
|
-
*
|
|
24354
|
-
* Group 1: local name, Group 2: global name. List the `${...}` form first so its
|
|
24355
|
-
* leading `$` is consumed before the bare `{{...}}` alternative can be tried.
|
|
24356
|
-
*/
|
|
24357
|
-
const VAR_TOKEN_REGEX = new RegExp('\\$\\{(' + VAR_PATH + ')\\}|\\{\\{(' + VAR_PATH + ')\\}\\}', 'g');
|
|
24340
|
+
const VAR_TOKEN_REGEX = new RegExp('\\$\\{(' + VAR_PATH + ')\\}', 'g');
|
|
24358
24341
|
const VAR_PATH_TAIL_REGEX = new RegExp('(' + VAR_PATH + ')$');
|
|
24359
24342
|
const INVALID_VAR_MESSAGE = 'Invalid variable name.';
|
|
24360
24343
|
const BLUR_HIDE_DELAY_MS = 150;
|
|
@@ -24593,8 +24576,7 @@ class MixedVariableInputComponent {
|
|
|
24593
24576
|
const structureBroken = chip.getAttribute('contenteditable') !== 'false' ||
|
|
24594
24577
|
!chip.querySelector('.cqa-var-chip__remove');
|
|
24595
24578
|
if (structureBroken) {
|
|
24596
|
-
|
|
24597
|
-
chip.parentNode?.replaceChild(this.buildChip(name, source), chip);
|
|
24579
|
+
chip.parentNode?.replaceChild(this.buildChip(name), chip);
|
|
24598
24580
|
}
|
|
24599
24581
|
}
|
|
24600
24582
|
// Remove stray remove icons left from partial undo/redo states.
|
|
@@ -24629,12 +24611,7 @@ class MixedVariableInputComponent {
|
|
|
24629
24611
|
// Keep the token as plain text while the caret is strictly inside.
|
|
24630
24612
|
if (caretOffset > start && caretOffset < end)
|
|
24631
24613
|
continue;
|
|
24632
|
-
|
|
24633
|
-
const name = m[1] ?? m[2] ?? '';
|
|
24634
|
-
const source = m[2] ? 'global' : 'plain';
|
|
24635
|
-
if (!name)
|
|
24636
|
-
continue;
|
|
24637
|
-
matches.push({ start, end, name, source });
|
|
24614
|
+
matches.push({ start, end, name: m[1] });
|
|
24638
24615
|
}
|
|
24639
24616
|
if (!matches.length)
|
|
24640
24617
|
continue;
|
|
@@ -24644,7 +24621,7 @@ class MixedVariableInputComponent {
|
|
|
24644
24621
|
if (mt.start > cursor) {
|
|
24645
24622
|
frag.appendChild(document.createTextNode(text.slice(cursor, mt.start)));
|
|
24646
24623
|
}
|
|
24647
|
-
const chip = this.buildChip(mt.name
|
|
24624
|
+
const chip = this.buildChip(mt.name);
|
|
24648
24625
|
frag.appendChild(chip);
|
|
24649
24626
|
lastChip = chip;
|
|
24650
24627
|
cursor = mt.end;
|
|
@@ -24690,10 +24667,7 @@ class MixedVariableInputComponent {
|
|
|
24690
24667
|
if (m.index > lastIndex) {
|
|
24691
24668
|
editor.appendChild(document.createTextNode(value.slice(lastIndex, m.index)));
|
|
24692
24669
|
}
|
|
24693
|
-
|
|
24694
|
-
const name = m[1] ?? m[2] ?? '';
|
|
24695
|
-
const source = m[2] ? 'global' : 'plain';
|
|
24696
|
-
editor.appendChild(this.buildChip(name, source));
|
|
24670
|
+
editor.appendChild(this.buildChip(m[1]));
|
|
24697
24671
|
lastIndex = m.index + m[0].length;
|
|
24698
24672
|
}
|
|
24699
24673
|
if (lastIndex < value.length) {
|
|
@@ -24713,10 +24687,8 @@ class MixedVariableInputComponent {
|
|
|
24713
24687
|
const el = node;
|
|
24714
24688
|
if (el.classList.contains('cqa-var-chip')) {
|
|
24715
24689
|
const name = el.getAttribute('data-var') || '';
|
|
24716
|
-
|
|
24717
|
-
|
|
24718
|
-
out += source === 'global' ? '{{' + name + '}}' : '${' + name + '}';
|
|
24719
|
-
}
|
|
24690
|
+
if (name)
|
|
24691
|
+
out += '${' + name + '}';
|
|
24720
24692
|
return;
|
|
24721
24693
|
}
|
|
24722
24694
|
if (el.tagName === 'BR') {
|
|
@@ -24731,15 +24703,14 @@ class MixedVariableInputComponent {
|
|
|
24731
24703
|
editor.childNodes.forEach(walk);
|
|
24732
24704
|
return out;
|
|
24733
24705
|
}
|
|
24734
|
-
buildChip(name
|
|
24706
|
+
buildChip(name) {
|
|
24735
24707
|
const chip = document.createElement('span');
|
|
24736
24708
|
chip.className = 'cqa-var-chip';
|
|
24737
24709
|
chip.setAttribute('contenteditable', 'false');
|
|
24738
24710
|
chip.setAttribute('data-var', name);
|
|
24739
|
-
chip.setAttribute('data-source', source);
|
|
24740
24711
|
const label = document.createElement('span');
|
|
24741
24712
|
label.className = 'cqa-var-chip__label';
|
|
24742
|
-
label.textContent =
|
|
24713
|
+
label.textContent = '${' + name + '}';
|
|
24743
24714
|
const remove = document.createElement('span');
|
|
24744
24715
|
remove.className = 'cqa-var-chip__remove';
|
|
24745
24716
|
remove.textContent = '×';
|
|
@@ -26425,7 +26396,7 @@ class DbQueryExecutionItemComponent {
|
|
|
26425
26396
|
}
|
|
26426
26397
|
}
|
|
26427
26398
|
DbQueryExecutionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
26428
|
-
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"] }] });
|
|
26399
|
+
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"] }] });
|
|
26429
26400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, decorators: [{
|
|
26430
26401
|
type: Component,
|
|
26431
26402
|
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: [] }]
|
|
@@ -27147,7 +27118,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
|
|
|
27147
27118
|
}
|
|
27148
27119
|
}
|
|
27149
27120
|
DbVerificationStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
27150
|
-
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"] }] });
|
|
27121
|
+
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"] }] });
|
|
27151
27122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, decorators: [{
|
|
27152
27123
|
type: Component,
|
|
27153
27124
|
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: [] }]
|
|
@@ -37887,10 +37858,6 @@ class TemplateVariablesFormComponent {
|
|
|
37887
37858
|
this.hasMoreEnvironments = false;
|
|
37888
37859
|
/** True while parent is loading environments (search or load more) */
|
|
37889
37860
|
this.isLoadingEnvironments = false;
|
|
37890
|
-
/** Global Data variables (workspace-scoped) for the new Global Data tab */
|
|
37891
|
-
this.globalVariableOptions = [];
|
|
37892
|
-
/** True while parent is loading global variables */
|
|
37893
|
-
this.isLoadingGlobalVariables = false;
|
|
37894
37861
|
/** True when the edited step is inside a FOR loop. */
|
|
37895
37862
|
this.isInsideForLoopStep = false;
|
|
37896
37863
|
/** True when the parent test case has a test data profile configured (testCase.testDataId is set). */
|
|
@@ -37914,7 +37881,6 @@ class TemplateVariablesFormComponent {
|
|
|
37914
37881
|
this.loadMoreUploads = new EventEmitter(); // Emit when user scrolls to load more uploads
|
|
37915
37882
|
this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
|
|
37916
37883
|
this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
|
|
37917
|
-
this.searchGlobalVariables = new EventEmitter(); // Emit when user searches global variables
|
|
37918
37884
|
this.cancelElementForm = new EventEmitter(); // Emit when element form is cancelled
|
|
37919
37885
|
this.elementFormVisibilityChange = new EventEmitter(); // Emit when element form visibility changes
|
|
37920
37886
|
// Cache for select configs to avoid recalculating on every change detection
|
|
@@ -37927,11 +37893,6 @@ class TemplateVariablesFormComponent {
|
|
|
37927
37893
|
this.environmentSelectConfigCache = new Map();
|
|
37928
37894
|
// Cache for environment parameter select configs
|
|
37929
37895
|
this.environmentParameterSelectConfigCache = new Map();
|
|
37930
|
-
// Cache for global-variable select configs. Without this, the template's
|
|
37931
|
-
// `[config]="getGlobalVariableSelectConfig(...)"` allocates a new config
|
|
37932
|
-
// every CD pass — cqa-dynamic-select sees the new reference and triggers
|
|
37933
|
-
// another CD, pegging the tab at 100% CPU.
|
|
37934
|
-
this.globalVariableSelectConfigCache = new Map();
|
|
37935
37896
|
// Cache for screen name select configs (for element variables)
|
|
37936
37897
|
this.screenNameSelectConfigCache = new Map();
|
|
37937
37898
|
// Cache for element select configs (filtered by screen name)
|
|
@@ -37958,46 +37919,18 @@ class TemplateVariablesFormComponent {
|
|
|
37958
37919
|
this.needsDataTypeDropdownCache = new Map();
|
|
37959
37920
|
this.shouldShowDropdownCache = new Map();
|
|
37960
37921
|
// Pre-computed data type options (static, no need to recreate)
|
|
37961
|
-
// Order matches the design: Plain Text · Run Time · Env Variable · Global Data · Test Data Profile
|
|
37962
37922
|
this.dataTypeOptions = [
|
|
37963
37923
|
{ id: 'plain-text', value: 'plain-text', name: 'Plain Text', label: 'Plain Text' },
|
|
37964
|
-
{ id: '
|
|
37965
|
-
{ id: '
|
|
37966
|
-
{ id: '
|
|
37967
|
-
{ id: 'parameter', value: 'parameter', name: 'Test Data Profile', label: 'Test Data Profile' }
|
|
37968
|
-
];
|
|
37969
|
-
/**
|
|
37970
|
-
* Stable segment options for the Value Source segment strip. MUST be a field
|
|
37971
|
-
* (not a getter) — see feedback_segment_control_no_getter_input.md: a getter
|
|
37972
|
-
* triggers a CD loop in cqa-segment-control.
|
|
37973
|
-
*/
|
|
37974
|
-
this.dataTypeSegments = [
|
|
37975
|
-
{ value: 'plain-text', label: 'Plain Text' },
|
|
37976
|
-
{ value: 'runtime', label: 'Run Time Variable' },
|
|
37977
|
-
{ value: 'environment', label: 'Environment Variable' },
|
|
37978
|
-
{ value: 'global', label: 'Global Data' },
|
|
37979
|
-
{ value: 'parameter', label: 'Test Data Profile' },
|
|
37924
|
+
{ id: 'parameter', value: 'parameter', name: '@|Parameter|', label: '@|Parameter|' },
|
|
37925
|
+
{ id: 'runtime', value: 'runtime', name: '$|Runtime|', label: '$|Runtime|' },
|
|
37926
|
+
{ id: 'environment', value: 'environment', name: '*|Environment|', label: '*|Environment|' }
|
|
37980
37927
|
];
|
|
37981
|
-
/**
|
|
37982
|
-
* Memoized filtered segments — drops Test Data Profile when neither TC nor FOR loop has a TDP.
|
|
37983
|
-
* Held as a field (not a getter) so cqa-segment-control's [segments] stays a stable reference.
|
|
37984
|
-
* Recomputed in ngOnChanges when isInsideForLoopStep / hasTestDataProfile change.
|
|
37985
|
-
*/
|
|
37986
|
-
this.visibleDataTypeSegments = this.dataTypeSegments;
|
|
37987
37928
|
this.createElementVisible = false;
|
|
37988
37929
|
// Tracks active variable-syntax errors by variable name. The validator below
|
|
37989
37930
|
// reads from this map so errors survive control re-validation on setValue().
|
|
37990
37931
|
this.variableSyntaxErrors = new Map();
|
|
37991
37932
|
this.controlsWithSyntaxValidator = new WeakSet();
|
|
37992
37933
|
}
|
|
37993
|
-
recomputeVisibleSegments() {
|
|
37994
|
-
if (!this.isInsideForLoopStep && !this.hasTestDataProfile) {
|
|
37995
|
-
this.visibleDataTypeSegments = this.dataTypeSegments.filter(s => s.value !== 'parameter');
|
|
37996
|
-
}
|
|
37997
|
-
else {
|
|
37998
|
-
this.visibleDataTypeSegments = this.dataTypeSegments;
|
|
37999
|
-
}
|
|
38000
|
-
}
|
|
38001
37934
|
onCreateElement(payload) {
|
|
38002
37935
|
this.createElement.emit(payload);
|
|
38003
37936
|
this.elementFormVisibilityChange.emit(false);
|
|
@@ -38025,12 +37958,10 @@ class TemplateVariablesFormComponent {
|
|
|
38025
37958
|
changes['hasMoreElements'] || changes['isLoadingElements'] ||
|
|
38026
37959
|
changes['parameterOptions'] || changes['hasMoreParameters'] || changes['isLoadingParameters'] ||
|
|
38027
37960
|
changes['environmentOptions'] || changes['hasMoreEnvironments'] || changes['isLoadingEnvironments'] ||
|
|
38028
|
-
changes['globalVariableOptions'] || changes['isLoadingGlobalVariables'] || changes['testCaseEnvironmentName'] ||
|
|
38029
37961
|
changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex'] || changes['defaultTestDataEndIndex'] || changes['isInsideForLoopStep'] || changes['hasTestDataProfile']) {
|
|
38030
37962
|
// Drop dataType option cache so dropdown options are re-filtered on input change.
|
|
38031
37963
|
if (changes['isInsideForLoopStep'] || changes['hasTestDataProfile']) {
|
|
38032
37964
|
this.dataTypeSelectConfigCache.clear();
|
|
38033
|
-
this.recomputeVisibleSegments();
|
|
38034
37965
|
}
|
|
38035
37966
|
// Only clear caches for changed inputs, not all caches
|
|
38036
37967
|
if (changes['templateVariables'] || changes['variablesForm']) {
|
|
@@ -38040,7 +37971,6 @@ class TemplateVariablesFormComponent {
|
|
|
38040
37971
|
this.parameterSelectConfigCache.clear();
|
|
38041
37972
|
this.environmentSelectConfigCache.clear();
|
|
38042
37973
|
this.environmentParameterSelectConfigCache.clear();
|
|
38043
|
-
this.globalVariableSelectConfigCache.clear();
|
|
38044
37974
|
this.selectedEnvironmentOptionsSnapshot.clear();
|
|
38045
37975
|
this.selectedParameterProfileSnapshot.clear();
|
|
38046
37976
|
this.screenNameSelectConfigCache.clear();
|
|
@@ -38099,36 +38029,6 @@ class TemplateVariablesFormComponent {
|
|
|
38099
38029
|
this.environmentParameterSelectConfigCache.clear();
|
|
38100
38030
|
}
|
|
38101
38031
|
}
|
|
38102
|
-
// testCaseEnvironmentName arrives asynchronously (parent resolves env name
|
|
38103
|
-
// via environmentService.show). When it lands, drop the env caches so the
|
|
38104
|
-
// auto-default seed in getEnvironmentSelectConfig runs once and the
|
|
38105
|
-
// "Environment Name" dropdown pre-selects the test case's env instead of
|
|
38106
|
-
// showing the "Select Environment" placeholder.
|
|
38107
|
-
if (changes['testCaseEnvironmentName']) {
|
|
38108
|
-
this.environmentSelectConfigCache.clear();
|
|
38109
|
-
this.environmentParameterSelectConfigCache.clear();
|
|
38110
|
-
}
|
|
38111
|
-
// Global Data dropdown's options/loading state changed — drop the global
|
|
38112
|
-
// config cache so the next render rebuilds with the fresh list.
|
|
38113
|
-
if (changes['globalVariableOptions'] || changes['isLoadingGlobalVariables']) {
|
|
38114
|
-
this.globalVariableSelectConfigCache.clear();
|
|
38115
|
-
}
|
|
38116
|
-
// When globalVariableOptions arrive (or change) after templateVariables are loaded,
|
|
38117
|
-
// backfill selectedGlobalVariableId on any global-type variable that has a name but
|
|
38118
|
-
// still lacks the numeric id (the lookup couldn't run during initial init because
|
|
38119
|
-
// options were empty).
|
|
38120
|
-
if (changes['globalVariableOptions'] && this.templateVariables) {
|
|
38121
|
-
this.backfillGlobalVariableIds();
|
|
38122
|
-
}
|
|
38123
|
-
// Proactively seed env-type variables with the test case's environment.
|
|
38124
|
-
// Runs whenever any input that could unlock the seed changes — relying on
|
|
38125
|
-
// a lazy seed inside getEnvironmentSelectConfig misses the case where the
|
|
38126
|
-
// segment is clicked before environmentOptions / testCaseEnvironmentName
|
|
38127
|
-
// both arrive.
|
|
38128
|
-
if (changes['templateVariables'] || changes['environmentOptions'] ||
|
|
38129
|
-
changes['testCaseEnvironmentName']) {
|
|
38130
|
-
this.seedDefaultEnvironmentForVariables();
|
|
38131
|
-
}
|
|
38132
38032
|
// Initialize data types and raw values for test-data variables
|
|
38133
38033
|
// NOTE: We do NOT include 'parameterOptions' here because it changes on every search,
|
|
38134
38034
|
// which would reset the test-data type dropdown. Instead, parameterOptions initialization
|
|
@@ -38396,27 +38296,6 @@ class TemplateVariablesFormComponent {
|
|
|
38396
38296
|
this.cdr.markForCheck();
|
|
38397
38297
|
}
|
|
38398
38298
|
}
|
|
38399
|
-
backfillGlobalVariableIds() {
|
|
38400
|
-
if (!this.templateVariables || !this.templateVariables.length)
|
|
38401
|
-
return;
|
|
38402
|
-
const opts = this.globalVariableOptions || [];
|
|
38403
|
-
if (!opts.length)
|
|
38404
|
-
return;
|
|
38405
|
-
this.templateVariables.forEach(variable => {
|
|
38406
|
-
if (variable.dataType !== 'global')
|
|
38407
|
-
return;
|
|
38408
|
-
if (variable.selectedGlobalVariableId != null)
|
|
38409
|
-
return;
|
|
38410
|
-
const name = (variable.selectedGlobalVariable && variable.selectedGlobalVariable.trim())
|
|
38411
|
-
|| (variable.rawValue ? String(variable.rawValue).trim() : '');
|
|
38412
|
-
if (!name)
|
|
38413
|
-
return;
|
|
38414
|
-
const matched = opts.find(g => g.name === name);
|
|
38415
|
-
if (matched && matched.id != null && !isNaN(Number(matched.id))) {
|
|
38416
|
-
variable.selectedGlobalVariableId = Number(matched.id);
|
|
38417
|
-
}
|
|
38418
|
-
});
|
|
38419
|
-
}
|
|
38420
38299
|
initializeTestDataVariables() {
|
|
38421
38300
|
this.templateVariables.forEach((variable, index) => {
|
|
38422
38301
|
if (this.needsDataTypeDropdown(variable)) {
|
|
@@ -38662,31 +38541,6 @@ class TemplateVariablesFormComponent {
|
|
|
38662
38541
|
}
|
|
38663
38542
|
}
|
|
38664
38543
|
}
|
|
38665
|
-
// For global type, rehydrate selectedGlobalVariable + selectedGlobalVariableId from
|
|
38666
|
-
// the parsed `{{name}}` value by looking the option up in globalVariableOptions.
|
|
38667
|
-
if (finalDataType === 'global') {
|
|
38668
|
-
const globalName = (variable.selectedGlobalVariable && variable.selectedGlobalVariable.trim())
|
|
38669
|
-
|| (rawValue ? String(rawValue).trim() : '');
|
|
38670
|
-
if (globalName) {
|
|
38671
|
-
variable.selectedGlobalVariable = globalName;
|
|
38672
|
-
if (!variableGroup.get('selectedGlobalVariable')) {
|
|
38673
|
-
variableGroup.addControl('selectedGlobalVariable', new FormControl(globalName));
|
|
38674
|
-
}
|
|
38675
|
-
else {
|
|
38676
|
-
variableGroup.get('selectedGlobalVariable')?.setValue(globalName, { emitEvent: false });
|
|
38677
|
-
}
|
|
38678
|
-
if (variable.selectedGlobalVariableId == null && (this.globalVariableOptions || []).length > 0) {
|
|
38679
|
-
const matched = (this.globalVariableOptions || []).find(g => g.name === globalName);
|
|
38680
|
-
if (matched && matched.id != null && !isNaN(Number(matched.id))) {
|
|
38681
|
-
variable.selectedGlobalVariableId = Number(matched.id);
|
|
38682
|
-
}
|
|
38683
|
-
}
|
|
38684
|
-
if (variableGroup.get('value')) {
|
|
38685
|
-
variableGroup.get('value')?.setValue(`{{${globalName}}}`, { emitEvent: false });
|
|
38686
|
-
}
|
|
38687
|
-
variable.value = this.formatTestDataValue(globalName, 'global');
|
|
38688
|
-
}
|
|
38689
|
-
}
|
|
38690
38544
|
// For environment type, use finalDataType (from testDataList) — value may not parse as *|...| yet.
|
|
38691
38545
|
if (finalDataType === 'environment') {
|
|
38692
38546
|
const parsedEnv = this.parseTestDataValue(variable.value || '');
|
|
@@ -38945,23 +38799,22 @@ class TemplateVariablesFormComponent {
|
|
|
38945
38799
|
if (!value || typeof value !== 'string') {
|
|
38946
38800
|
return { dataType: 'plain-text', rawValue: '' };
|
|
38947
38801
|
}
|
|
38948
|
-
//
|
|
38949
|
-
if (value.startsWith('{{') && value.endsWith('}}')) {
|
|
38950
|
-
return { dataType: 'global', rawValue: value.slice(2, -2) };
|
|
38951
|
-
}
|
|
38952
|
-
// Parameter: @|name|
|
|
38802
|
+
// Check for parameter format: @|value|
|
|
38953
38803
|
if (value.startsWith('@|') && value.endsWith('|')) {
|
|
38954
38804
|
return { dataType: 'parameter', rawValue: value.slice(2, -1) };
|
|
38955
38805
|
}
|
|
38956
|
-
//
|
|
38957
|
-
if (value.startsWith('$|') && value.endsWith('|')) {
|
|
38806
|
+
// Check for runtime format: $|value|
|
|
38807
|
+
else if (value.startsWith('$|') && value.endsWith('|')) {
|
|
38958
38808
|
return { dataType: 'runtime', rawValue: value.slice(2, -1) };
|
|
38959
38809
|
}
|
|
38960
|
-
//
|
|
38961
|
-
if (value.startsWith('*|') && value.endsWith('|')) {
|
|
38810
|
+
// Check for environment format: *|value|
|
|
38811
|
+
else if (value.startsWith('*|') && value.endsWith('|')) {
|
|
38962
38812
|
return { dataType: 'environment', rawValue: value.slice(2, -1) };
|
|
38963
38813
|
}
|
|
38964
|
-
|
|
38814
|
+
// Plain text (no formatting)
|
|
38815
|
+
else {
|
|
38816
|
+
return { dataType: 'plain-text', rawValue: value };
|
|
38817
|
+
}
|
|
38965
38818
|
}
|
|
38966
38819
|
formatTestDataValue(rawValue, dataType) {
|
|
38967
38820
|
if (!rawValue) {
|
|
@@ -38974,8 +38827,6 @@ class TemplateVariablesFormComponent {
|
|
|
38974
38827
|
return `$|${rawValue}|`;
|
|
38975
38828
|
case 'environment':
|
|
38976
38829
|
return `*|${rawValue}|`;
|
|
38977
|
-
case 'global':
|
|
38978
|
-
return `{{${rawValue}}}`;
|
|
38979
38830
|
case 'plain-text':
|
|
38980
38831
|
default:
|
|
38981
38832
|
return rawValue;
|
|
@@ -39199,64 +39050,6 @@ class TemplateVariablesFormComponent {
|
|
|
39199
39050
|
getCurrentDataType(variable) {
|
|
39200
39051
|
return variable.dataType || 'plain-text';
|
|
39201
39052
|
}
|
|
39202
|
-
/** Whether the variable is currently using the Global Data tab. */
|
|
39203
|
-
isGlobalType(variable) {
|
|
39204
|
-
return (variable.dataType || 'plain-text') === 'global';
|
|
39205
|
-
}
|
|
39206
|
-
/** Whether the user has picked a global variable on this row. */
|
|
39207
|
-
hasSelectedGlobalVariable(variable) {
|
|
39208
|
-
return !!variable.selectedGlobalVariable;
|
|
39209
|
-
}
|
|
39210
|
-
/**
|
|
39211
|
-
* Build select config for the Global Data dropdown.
|
|
39212
|
-
* Each row inserts `{{name}}` on selection.
|
|
39213
|
-
*/
|
|
39214
|
-
getGlobalVariableSelectConfig(variable, index) {
|
|
39215
|
-
const cacheKey = `${variable.name}_globalVariable`;
|
|
39216
|
-
const cached = this.globalVariableSelectConfigCache.get(cacheKey);
|
|
39217
|
-
if (cached) {
|
|
39218
|
-
return cached;
|
|
39219
|
-
}
|
|
39220
|
-
const variableGroup = this.getVariableFormGroup(variable.name);
|
|
39221
|
-
if (variableGroup && !variableGroup.get('selectedGlobalVariable')) {
|
|
39222
|
-
variableGroup.addControl('selectedGlobalVariable', new FormControl(variable.selectedGlobalVariable || ''));
|
|
39223
|
-
}
|
|
39224
|
-
const options = (this.globalVariableOptions || []).map(g => ({
|
|
39225
|
-
id: g.name,
|
|
39226
|
-
value: g.name,
|
|
39227
|
-
name: g.name,
|
|
39228
|
-
label: g.name,
|
|
39229
|
-
}));
|
|
39230
|
-
const config = {
|
|
39231
|
-
key: 'selectedGlobalVariable',
|
|
39232
|
-
placeholder: 'Search global variable',
|
|
39233
|
-
multiple: false,
|
|
39234
|
-
searchable: true,
|
|
39235
|
-
serverSearch: true,
|
|
39236
|
-
isLoading: this.isLoadingGlobalVariables,
|
|
39237
|
-
options,
|
|
39238
|
-
onSearch: (query) => this.searchGlobalVariables.emit(query),
|
|
39239
|
-
onChange: (value) => {
|
|
39240
|
-
const name = value != null ? String(value) : '';
|
|
39241
|
-
const matched = (this.globalVariableOptions || []).find(g => g.name === name);
|
|
39242
|
-
const numericId = matched && matched.id != null && !isNaN(Number(matched.id))
|
|
39243
|
-
? Number(matched.id)
|
|
39244
|
-
: undefined;
|
|
39245
|
-
variable.selectedGlobalVariable = name;
|
|
39246
|
-
variable.selectedGlobalVariableId = numericId;
|
|
39247
|
-
variable.rawValue = name;
|
|
39248
|
-
const formatted = this.formatTestDataValue(name, 'global');
|
|
39249
|
-
variable.value = formatted;
|
|
39250
|
-
const grp = this.getVariableFormGroup(variable.name);
|
|
39251
|
-
if (grp?.get('value'))
|
|
39252
|
-
grp.get('value')?.setValue(formatted, { emitEvent: false });
|
|
39253
|
-
this.variableValueChange.emit({ name: variable.name, value: formatted });
|
|
39254
|
-
this.cdr.markForCheck();
|
|
39255
|
-
},
|
|
39256
|
-
};
|
|
39257
|
-
this.globalVariableSelectConfigCache.set(cacheKey, config);
|
|
39258
|
-
return config;
|
|
39259
|
-
}
|
|
39260
39053
|
getRawValue(variable) {
|
|
39261
39054
|
return variable.rawValue || '';
|
|
39262
39055
|
}
|
|
@@ -39299,15 +39092,6 @@ class TemplateVariablesFormComponent {
|
|
|
39299
39092
|
return;
|
|
39300
39093
|
// Update stored data type on the variable object
|
|
39301
39094
|
variable.dataType = dataType;
|
|
39302
|
-
// Clear global-tab state if leaving the global tab.
|
|
39303
|
-
if (dataType !== 'global') {
|
|
39304
|
-
variable.selectedGlobalVariable = undefined;
|
|
39305
|
-
variable.selectedGlobalVariableId = undefined;
|
|
39306
|
-
const grp = this.getVariableFormGroup(variableName);
|
|
39307
|
-
if (grp?.get('selectedGlobalVariable')) {
|
|
39308
|
-
grp.get('selectedGlobalVariable')?.setValue('', { emitEvent: false });
|
|
39309
|
-
}
|
|
39310
|
-
}
|
|
39311
39095
|
// Clear parameter and environment select config caches since data type changed
|
|
39312
39096
|
this.testDataProfileSelectConfigCache.delete(`${variableName}_testDataProfile`);
|
|
39313
39097
|
this.dataSetSelectConfigCache.delete(`${variableName}_dataSet`);
|
|
@@ -39390,19 +39174,12 @@ class TemplateVariablesFormComponent {
|
|
|
39390
39174
|
if (variableGroup.get('value')) {
|
|
39391
39175
|
// For all types, start with empty value when switching
|
|
39392
39176
|
variableGroup.get('value')?.setValue('', { emitEvent: false });
|
|
39177
|
+
// For environment type, also clear selectedEnvironment
|
|
39178
|
+
if (dataType === 'environment' && variableGroup.get('selectedEnvironment')) {
|
|
39179
|
+
variableGroup.get('selectedEnvironment')?.setValue('', { emitEvent: false });
|
|
39180
|
+
}
|
|
39393
39181
|
}
|
|
39394
39182
|
}
|
|
39395
|
-
// Env-on-test-case: when the user picks the "Environment Variable" segment,
|
|
39396
|
-
// pre-select the test case's env via the shared seed helper. Runs outside
|
|
39397
|
-
// the `variableGroup.get('value')` guard so it works even when the value
|
|
39398
|
-
// control hasn't been added yet for this variable.
|
|
39399
|
-
if (dataType === 'environment') {
|
|
39400
|
-
// Mark the variable as env-type so the seed pass picks it up.
|
|
39401
|
-
variable.dataType = 'environment';
|
|
39402
|
-
this.environmentSelectConfigCache.delete(`${variable.name}_environment`);
|
|
39403
|
-
this.environmentParameterSelectConfigCache.delete(`${variable.name}_envParam`);
|
|
39404
|
-
this.seedDefaultEnvironmentForVariables();
|
|
39405
|
-
}
|
|
39406
39183
|
// If switching to parameter type, check for default values and initialize them
|
|
39407
39184
|
if (dataType === 'parameter') {
|
|
39408
39185
|
const index = this.templateVariables.indexOf(variable);
|
|
@@ -40087,65 +39864,6 @@ class TemplateVariablesFormComponent {
|
|
|
40087
39864
|
this.parameterForDataSetSelectConfigCache.set(cacheKey, config);
|
|
40088
39865
|
return config;
|
|
40089
39866
|
}
|
|
40090
|
-
/**
|
|
40091
|
-
* Env-on-test-case contract: a test case has exactly one environment, so the
|
|
40092
|
-
* "Environment Name" dropdown has nothing meaningful to choose from. We trust
|
|
40093
|
-
* `testCaseEnvironmentName` as the source of truth — even if it's not in the
|
|
40094
|
-
* loaded `environmentOptions` yet (those are async, env-scoped, and may be
|
|
40095
|
-
* empty when the env has no parameters). The dropdown's `optionsArray.unshift`
|
|
40096
|
-
* fallback in `getEnvironmentSelectConfig` ensures the value renders even when
|
|
40097
|
-
* missing from the option list.
|
|
40098
|
-
*/
|
|
40099
|
-
resolveDefaultEnvironmentName() {
|
|
40100
|
-
const tcName = (this.testCaseEnvironmentName ?? '').trim();
|
|
40101
|
-
if (tcName) {
|
|
40102
|
-
return tcName;
|
|
40103
|
-
}
|
|
40104
|
-
const unique = this.getUniqueEnvironments();
|
|
40105
|
-
return unique.length === 1 ? unique[0].name : '';
|
|
40106
|
-
}
|
|
40107
|
-
/**
|
|
40108
|
-
* Proactive companion to `resolveDefaultEnvironmentName`: walks every env-type
|
|
40109
|
-
* template variable that hasn't been seeded yet and pre-fills its
|
|
40110
|
-
* `selectedEnvironment` (plus the matching form control) with the test case's
|
|
40111
|
-
* environment. Idempotent — variables that already have a selection are
|
|
40112
|
-
* skipped. Called from `ngOnChanges` whenever the inputs that could unlock the
|
|
40113
|
-
* seed (`testCaseEnvironmentName`, `environmentOptions`, `templateVariables`)
|
|
40114
|
-
* change.
|
|
40115
|
-
*/
|
|
40116
|
-
seedDefaultEnvironmentForVariables() {
|
|
40117
|
-
const auto = this.resolveDefaultEnvironmentName();
|
|
40118
|
-
if (!auto) {
|
|
40119
|
-
return;
|
|
40120
|
-
}
|
|
40121
|
-
for (const variable of this.templateVariables ?? []) {
|
|
40122
|
-
if (!this.isEnvironmentType(variable)) {
|
|
40123
|
-
continue;
|
|
40124
|
-
}
|
|
40125
|
-
if (variable.selectedEnvironment) {
|
|
40126
|
-
continue;
|
|
40127
|
-
}
|
|
40128
|
-
variable.selectedEnvironment = auto;
|
|
40129
|
-
const envOption = this.environmentOptions.find(env => env.environment === auto);
|
|
40130
|
-
if (envOption) {
|
|
40131
|
-
const idMatch = envOption.id.match(/env-(\d+)-/);
|
|
40132
|
-
if (idMatch && idMatch[1]) {
|
|
40133
|
-
variable.selectedEnvironmentId = parseInt(idMatch[1], 10);
|
|
40134
|
-
}
|
|
40135
|
-
}
|
|
40136
|
-
const grp = this.getVariableFormGroup(variable.name);
|
|
40137
|
-
if (grp) {
|
|
40138
|
-
if (!grp.get('selectedEnvironment')) {
|
|
40139
|
-
grp.addControl('selectedEnvironment', new FormControl(auto));
|
|
40140
|
-
}
|
|
40141
|
-
else {
|
|
40142
|
-
grp.get('selectedEnvironment').setValue(auto, { emitEvent: false });
|
|
40143
|
-
}
|
|
40144
|
-
}
|
|
40145
|
-
this.environmentSelectConfigCache.delete(`${variable.name}_environment`);
|
|
40146
|
-
this.environmentParameterSelectConfigCache.delete(`${variable.name}_envParam`);
|
|
40147
|
-
}
|
|
40148
|
-
}
|
|
40149
39867
|
/**
|
|
40150
39868
|
* Get unique environments from environment options
|
|
40151
39869
|
*/
|
|
@@ -40198,42 +39916,18 @@ class TemplateVariablesFormComponent {
|
|
|
40198
39916
|
label: variable.selectedEnvironment
|
|
40199
39917
|
});
|
|
40200
39918
|
}
|
|
40201
|
-
// Ensure form control exists for environment selection
|
|
40202
|
-
// test case's env when the variable doesn't already have a selection — the
|
|
40203
|
-
// env-on-test-case contract leaves nothing to choose between.
|
|
39919
|
+
// Ensure form control exists for environment selection
|
|
40204
39920
|
const variableGroup = this.getVariableFormGroup(variable.name);
|
|
40205
|
-
const autoDefault = this.resolveDefaultEnvironmentName();
|
|
40206
|
-
const currentEnv = variable.selectedEnvironment || autoDefault || '';
|
|
40207
|
-
if (currentEnv && currentEnv !== variable.selectedEnvironment) {
|
|
40208
|
-
variable.selectedEnvironment = currentEnv;
|
|
40209
|
-
const envOption = this.environmentOptions.find(env => env.environment === currentEnv);
|
|
40210
|
-
if (envOption) {
|
|
40211
|
-
const idMatch = envOption.id.match(/env-(\d+)-/);
|
|
40212
|
-
if (idMatch && idMatch[1]) {
|
|
40213
|
-
variable.selectedEnvironmentId = parseInt(idMatch[1], 10);
|
|
40214
|
-
}
|
|
40215
|
-
}
|
|
40216
|
-
}
|
|
40217
39921
|
if (variableGroup && !variableGroup.get('selectedEnvironment')) {
|
|
39922
|
+
const currentEnv = variable.selectedEnvironment || '';
|
|
40218
39923
|
variableGroup.addControl('selectedEnvironment', new FormControl(currentEnv));
|
|
40219
39924
|
}
|
|
40220
|
-
else if (variableGroup) {
|
|
40221
|
-
const ctrl = variableGroup.get('selectedEnvironment');
|
|
40222
|
-
if (ctrl && !ctrl.value && currentEnv) {
|
|
40223
|
-
ctrl.setValue(currentEnv, { emitEvent: false });
|
|
40224
|
-
}
|
|
40225
|
-
}
|
|
40226
|
-
// env-on-test-case: when the test case is bound to a specific environment,
|
|
40227
|
-
// there is no other valid choice — disable the dropdown so the user can't
|
|
40228
|
-
// accidentally pick a different env. Auto-select continues to populate it.
|
|
40229
|
-
const lockToTestCaseEnv = !!(this.testCaseEnvironmentName ?? '').trim();
|
|
40230
39925
|
const config = {
|
|
40231
39926
|
key: 'selectedEnvironment',
|
|
40232
39927
|
placeholder: `Select Environment`,
|
|
40233
39928
|
multiple: false,
|
|
40234
|
-
searchable:
|
|
40235
|
-
serverSearch:
|
|
40236
|
-
disabled: lockToTestCaseEnv,
|
|
39929
|
+
searchable: true,
|
|
39930
|
+
serverSearch: true,
|
|
40237
39931
|
options: optionsArray,
|
|
40238
39932
|
hasMore: this.hasMoreEnvironments,
|
|
40239
39933
|
isLoading: this.isLoadingEnvironments,
|
|
@@ -40766,10 +40460,10 @@ class TemplateVariablesFormComponent {
|
|
|
40766
40460
|
}
|
|
40767
40461
|
}
|
|
40768
40462
|
TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
40769
|
-
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 [segments]=\"visibleDataTypeSegments\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\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 });
|
|
40463
|
+
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 });
|
|
40770
40464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
|
|
40771
40465
|
type: Component,
|
|
40772
|
-
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 [segments]=\"visibleDataTypeSegments\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\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"] }]
|
|
40466
|
+
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"] }]
|
|
40773
40467
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
|
|
40774
40468
|
type: Input
|
|
40775
40469
|
}], variablesForm: [{
|
|
@@ -40808,14 +40502,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
40808
40502
|
type: Input
|
|
40809
40503
|
}], isLoadingEnvironments: [{
|
|
40810
40504
|
type: Input
|
|
40811
|
-
}], globalVariableOptions: [{
|
|
40812
|
-
type: Input
|
|
40813
|
-
}], isLoadingGlobalVariables: [{
|
|
40814
|
-
type: Input
|
|
40815
|
-
}], testCaseEnvironmentName: [{
|
|
40816
|
-
type: Input
|
|
40817
|
-
}], testCaseTestDataId: [{
|
|
40818
|
-
type: Input
|
|
40819
40505
|
}], defaultTestDataProfileId: [{
|
|
40820
40506
|
type: Input
|
|
40821
40507
|
}], defaultTestDataStartIndex: [{
|
|
@@ -40864,8 +40550,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
40864
40550
|
type: Output
|
|
40865
40551
|
}], loadMoreEnvironments: [{
|
|
40866
40552
|
type: Output
|
|
40867
|
-
}], searchGlobalVariables: [{
|
|
40868
|
-
type: Output
|
|
40869
40553
|
}], cancelElementForm: [{
|
|
40870
40554
|
type: Output
|
|
40871
40555
|
}], elementFormVisibilityChange: [{
|
|
@@ -40921,9 +40605,6 @@ class StepBuilderActionComponent {
|
|
|
40921
40605
|
this.hasMoreEnvironments = false;
|
|
40922
40606
|
/** True while parent is loading environments (search or load more) */
|
|
40923
40607
|
this.isLoadingEnvironments = false;
|
|
40924
|
-
/** Global Data variables (workspace-scoped) for the Global Data tab. */
|
|
40925
|
-
this.globalVariableOptions = [];
|
|
40926
|
-
this.isLoadingGlobalVariables = false;
|
|
40927
40608
|
/** Whether current step creation is happening inside FOR loop context */
|
|
40928
40609
|
this.isInsideForLoopStep = false;
|
|
40929
40610
|
/** True when the parent test case has a test data profile configured (testCase.testDataId is set). */
|
|
@@ -40944,7 +40625,6 @@ class StepBuilderActionComponent {
|
|
|
40944
40625
|
this.loadMoreUploads = new EventEmitter(); // Emit when user scrolls to load more uploads
|
|
40945
40626
|
this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
|
|
40946
40627
|
this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
|
|
40947
|
-
this.searchGlobalVariables = new EventEmitter();
|
|
40948
40628
|
/** Emit when step is created */
|
|
40949
40629
|
this.createStep = new EventEmitter();
|
|
40950
40630
|
/** Emit when cancelled */
|
|
@@ -41747,10 +41427,10 @@ class StepBuilderActionComponent {
|
|
|
41747
41427
|
}
|
|
41748
41428
|
}
|
|
41749
41429
|
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 });
|
|
41750
|
-
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"] }] });
|
|
41430
|
+
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"] }] });
|
|
41751
41431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
|
|
41752
41432
|
type: Component,
|
|
41753
|
-
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 [
|
|
41433
|
+
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: [] }]
|
|
41754
41434
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showHeader: [{
|
|
41755
41435
|
type: Input
|
|
41756
41436
|
}], changeTemplateSignal: [{
|
|
@@ -41809,14 +41489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
41809
41489
|
type: Input
|
|
41810
41490
|
}], isLoadingEnvironments: [{
|
|
41811
41491
|
type: Input
|
|
41812
|
-
}], globalVariableOptions: [{
|
|
41813
|
-
type: Input
|
|
41814
|
-
}], isLoadingGlobalVariables: [{
|
|
41815
|
-
type: Input
|
|
41816
|
-
}], testCaseEnvironmentName: [{
|
|
41817
|
-
type: Input
|
|
41818
|
-
}], testCaseTestDataId: [{
|
|
41819
|
-
type: Input
|
|
41820
41492
|
}], defaultTestDataProfileId: [{
|
|
41821
41493
|
type: Input
|
|
41822
41494
|
}], defaultTestDataStartIndex: [{
|
|
@@ -41859,8 +41531,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
41859
41531
|
type: Output
|
|
41860
41532
|
}], loadMoreEnvironments: [{
|
|
41861
41533
|
type: Output
|
|
41862
|
-
}], searchGlobalVariables: [{
|
|
41863
|
-
type: Output
|
|
41864
41534
|
}], createStep: [{
|
|
41865
41535
|
type: Output
|
|
41866
41536
|
}], cancelled: [{
|
|
@@ -41943,11 +41613,6 @@ class StepBuilderLoopComponent {
|
|
|
41943
41613
|
this.loadMoreEnvironments = new EventEmitter();
|
|
41944
41614
|
this.redirectToParameter = new EventEmitter();
|
|
41945
41615
|
this.redirectToEnvironment = new EventEmitter();
|
|
41946
|
-
/**
|
|
41947
|
-
* Emitted when the user clicks "Manage profiles" in the empty state. Host
|
|
41948
|
-
* navigates to the Environment & Data Management screen for the active env.
|
|
41949
|
-
*/
|
|
41950
|
-
this.manageProfilesClicked = new EventEmitter();
|
|
41951
41616
|
this.selectedWhileTemplate = null;
|
|
41952
41617
|
this.selectedWhileDescription = '';
|
|
41953
41618
|
this.selectedWhileMetadata = '';
|
|
@@ -42564,10 +42229,10 @@ class StepBuilderLoopComponent {
|
|
|
42564
42229
|
}
|
|
42565
42230
|
}
|
|
42566
42231
|
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 });
|
|
42567
|
-
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"] }] });
|
|
42232
|
+
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"] }] });
|
|
42568
42233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
|
|
42569
42234
|
type: Component,
|
|
42570
|
-
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: [] }]
|
|
42235
|
+
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: [] }]
|
|
42571
42236
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { loopType: [{
|
|
42572
42237
|
type: Input
|
|
42573
42238
|
}], selectOptions: [{
|
|
@@ -42640,8 +42305,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42640
42305
|
type: Input
|
|
42641
42306
|
}], testStep: [{
|
|
42642
42307
|
type: Input
|
|
42643
|
-
}], testCaseEnvironmentName: [{
|
|
42644
|
-
type: Input
|
|
42645
42308
|
}], loadMoreElements: [{
|
|
42646
42309
|
type: Output
|
|
42647
42310
|
}], searchElements: [{
|
|
@@ -42670,8 +42333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42670
42333
|
type: Output
|
|
42671
42334
|
}], redirectToEnvironment: [{
|
|
42672
42335
|
type: Output
|
|
42673
|
-
}], manageProfilesClicked: [{
|
|
42674
|
-
type: Output
|
|
42675
42336
|
}] } });
|
|
42676
42337
|
|
|
42677
42338
|
class StepBuilderConditionComponent {
|
|
@@ -42710,9 +42371,6 @@ class StepBuilderConditionComponent {
|
|
|
42710
42371
|
this.environmentOptions = [];
|
|
42711
42372
|
this.hasMoreEnvironments = false;
|
|
42712
42373
|
this.isLoadingEnvironments = false;
|
|
42713
|
-
/** Global Data variables (workspace-scoped) for the Global Data tab. */
|
|
42714
|
-
this.globalVariableOptions = [];
|
|
42715
|
-
this.isLoadingGlobalVariables = false;
|
|
42716
42374
|
this.isInsideForLoopStep = false;
|
|
42717
42375
|
this.hasTestDataProfile = false;
|
|
42718
42376
|
/** True while parent is creating the step (API in progress); show loader on Create Step button */
|
|
@@ -42734,7 +42392,6 @@ class StepBuilderConditionComponent {
|
|
|
42734
42392
|
this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
|
|
42735
42393
|
this.redirectToParameter = new EventEmitter();
|
|
42736
42394
|
this.redirectToEnvironment = new EventEmitter();
|
|
42737
|
-
this.searchGlobalVariables = new EventEmitter();
|
|
42738
42395
|
this.includeElse = false;
|
|
42739
42396
|
// Cache for value configs to avoid recreating on every change detection
|
|
42740
42397
|
this.valueConfigCache = null;
|
|
@@ -43438,10 +43095,10 @@ class StepBuilderConditionComponent {
|
|
|
43438
43095
|
}
|
|
43439
43096
|
}
|
|
43440
43097
|
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 });
|
|
43441
|
-
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 });
|
|
43098
|
+
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 });
|
|
43442
43099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
|
|
43443
43100
|
type: Component,
|
|
43444
|
-
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: [] }]
|
|
43101
|
+
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: [] }]
|
|
43445
43102
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { operatorOptions: [{
|
|
43446
43103
|
type: Input
|
|
43447
43104
|
}], conditionTemplates: [{
|
|
@@ -43476,14 +43133,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43476
43133
|
type: Input
|
|
43477
43134
|
}], isLoadingEnvironments: [{
|
|
43478
43135
|
type: Input
|
|
43479
|
-
}], globalVariableOptions: [{
|
|
43480
|
-
type: Input
|
|
43481
|
-
}], isLoadingGlobalVariables: [{
|
|
43482
|
-
type: Input
|
|
43483
|
-
}], testCaseEnvironmentName: [{
|
|
43484
|
-
type: Input
|
|
43485
|
-
}], testCaseTestDataId: [{
|
|
43486
|
-
type: Input
|
|
43487
43136
|
}], defaultTestDataProfileId: [{
|
|
43488
43137
|
type: Input
|
|
43489
43138
|
}], defaultTestDataStartIndex: [{
|
|
@@ -43526,8 +43175,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43526
43175
|
type: Output
|
|
43527
43176
|
}], redirectToEnvironment: [{
|
|
43528
43177
|
type: Output
|
|
43529
|
-
}], searchGlobalVariables: [{
|
|
43530
|
-
type: Output
|
|
43531
43178
|
}] } });
|
|
43532
43179
|
|
|
43533
43180
|
class StepBuilderDatabaseComponent {
|
|
@@ -46258,7 +45905,6 @@ const TEST_CASE_DETAILS_SELECT_KEYS = {
|
|
|
46258
45905
|
type: 'type',
|
|
46259
45906
|
labels: 'labels',
|
|
46260
45907
|
prerequisiteCases: 'prerequisiteCases',
|
|
46261
|
-
environment: 'environment',
|
|
46262
45908
|
testDataProfile: 'testDataProfile',
|
|
46263
45909
|
testDataSet: 'testDataSet',
|
|
46264
45910
|
videoRecording: 'videoRecording',
|
|
@@ -46383,7 +46029,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46383
46029
|
type: new FormControl(''),
|
|
46384
46030
|
labels: new FormControl([]),
|
|
46385
46031
|
prerequisiteCases: new FormControl([]),
|
|
46386
|
-
environment: new FormControl(''),
|
|
46387
46032
|
testDataProfile: new FormControl(''),
|
|
46388
46033
|
testDataSet: new FormControl(''),
|
|
46389
46034
|
defaultBrowser: new FormControl(''),
|
|
@@ -46418,13 +46063,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46418
46063
|
searchable: true,
|
|
46419
46064
|
options: [],
|
|
46420
46065
|
};
|
|
46421
|
-
this.environmentSelectConfig = {
|
|
46422
|
-
key: 'environment',
|
|
46423
|
-
label: '',
|
|
46424
|
-
placeholder: 'Select environment',
|
|
46425
|
-
searchable: true,
|
|
46426
|
-
options: [],
|
|
46427
|
-
};
|
|
46428
46066
|
this.testDataProfileSelectConfig = {
|
|
46429
46067
|
key: 'testDataProfile',
|
|
46430
46068
|
label: '',
|
|
@@ -46689,16 +46327,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46689
46327
|
this._labelsSelectConfigDirty = true;
|
|
46690
46328
|
this.cdr.markForCheck();
|
|
46691
46329
|
}
|
|
46692
|
-
// Environment cascade: clear dependent Test Data Profile / Set selections so the host
|
|
46693
|
-
// re-fetches profiles for the new env. Mark dirty to prevent ngOnChanges re-seed.
|
|
46694
|
-
if (event.key === TEST_CASE_DETAILS_SELECT_KEYS.environment) {
|
|
46695
|
-
const tdpCtrl = this.editForm.get(TEST_CASE_DETAILS_SELECT_KEYS.testDataProfile);
|
|
46696
|
-
const tdsCtrl = this.editForm.get(TEST_CASE_DETAILS_SELECT_KEYS.testDataSet);
|
|
46697
|
-
tdpCtrl?.setValue('', { emitEvent: false });
|
|
46698
|
-
tdsCtrl?.setValue('', { emitEvent: false });
|
|
46699
|
-
tdpCtrl?.markAsDirty();
|
|
46700
|
-
tdsCtrl?.markAsDirty();
|
|
46701
|
-
}
|
|
46702
46330
|
// Mark Test Data selects as dirty so later input changes (options/config) don't overwrite user choice
|
|
46703
46331
|
if (event.key === TEST_CASE_DETAILS_SELECT_KEYS.testDataProfile || event.key === TEST_CASE_DETAILS_SELECT_KEYS.testDataSet) {
|
|
46704
46332
|
const ctrl = this.editForm.get(event.key);
|
|
@@ -46809,11 +46437,9 @@ class TestCaseDetailsEditComponent {
|
|
|
46809
46437
|
this.editStatus = this.statusItem?.value ?? '';
|
|
46810
46438
|
this.editPriority = this.priorityItem?.value ?? '';
|
|
46811
46439
|
const typeRaw = (this.getConfigItemValue('Execution', 'Type') || this.typeItem?.value) ?? '';
|
|
46812
|
-
const environmentRaw = this.getConfigItemValue('Execution', 'Environment') ?? '';
|
|
46813
46440
|
const testDataProfileRaw = this.getConfigItemValue('Execution', 'Test Data Profile') ?? '';
|
|
46814
46441
|
const testDataSetRaw = this.normalizeTestDataSetRawValue(this.getConfigItemValue('Execution', 'Test Data Set') ?? '');
|
|
46815
46442
|
const typeVal = this.resolveToOptionValue(typeRaw, this.selectConfigOverrides?.['type']?.options) ?? typeRaw;
|
|
46816
|
-
const environmentVal = this.resolveToOptionValue(environmentRaw, this.selectConfigOverrides?.['environment']?.options) ?? environmentRaw;
|
|
46817
46443
|
const testDataProfileVal = this.resolveToOptionValue(testDataProfileRaw, this.selectConfigOverrides?.['testDataProfile']?.options) ?? testDataProfileRaw;
|
|
46818
46444
|
const testDataSetVal = this.resolveToOptionValue(testDataSetRaw, this.selectConfigOverrides?.['testDataSet']?.options) ?? testDataSetRaw;
|
|
46819
46445
|
this.editLabels = [...this.labels];
|
|
@@ -46849,7 +46475,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46849
46475
|
priority: this.editPriority,
|
|
46850
46476
|
type: typeVal || '',
|
|
46851
46477
|
labels: this.editLabels,
|
|
46852
|
-
environment: environmentVal || '',
|
|
46853
46478
|
testDataProfile: testDataProfileVal || '',
|
|
46854
46479
|
testDataSet: testDataSetVal ?? '',
|
|
46855
46480
|
prerequisiteCases,
|
|
@@ -46876,7 +46501,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46876
46501
|
const status = this.editForm.get('status')?.value ?? this.editStatus;
|
|
46877
46502
|
const priority = this.editForm.get('priority')?.value ?? this.editPriority;
|
|
46878
46503
|
const typeVal = this.editForm.get('type')?.value ?? '';
|
|
46879
|
-
const environmentVal = this.editForm.get('environment')?.value ?? '';
|
|
46880
46504
|
const testDataProfileVal = this.editForm.get('testDataProfile')?.value ?? '';
|
|
46881
46505
|
const testDataSetVal = this.editForm.get('testDataSet')?.value ?? '';
|
|
46882
46506
|
const configSectionsMerged = this.mergeConfigSections();
|
|
@@ -46887,7 +46511,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46887
46511
|
priority,
|
|
46888
46512
|
type: typeVal,
|
|
46889
46513
|
labels: this.editLabels,
|
|
46890
|
-
environmentId: environmentVal || null,
|
|
46891
46514
|
testDataProfileId: testDataProfileVal || null,
|
|
46892
46515
|
testDataSetIndex: testDataSetVal ?? null,
|
|
46893
46516
|
configSections: configSectionsMerged,
|
|
@@ -46961,7 +46584,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46961
46584
|
this._labelsSelectConfigDirty = true;
|
|
46962
46585
|
if (changes['selectConfigOverrides'] && this.editForm?.get('type')) {
|
|
46963
46586
|
const typeCtrl = this.editForm.get('type');
|
|
46964
|
-
const envCtrl = this.editForm.get('environment');
|
|
46965
46587
|
const tdpCtrl = this.editForm.get('testDataProfile');
|
|
46966
46588
|
const tdsCtrl = this.editForm.get('testDataSet');
|
|
46967
46589
|
const enableAiCtrl = this.editForm.get('enableAiSmartness');
|
|
@@ -46971,11 +46593,6 @@ class TestCaseDetailsEditComponent {
|
|
|
46971
46593
|
const typeRaw = (this.getConfigItemValue('Execution', 'Type') || this.typeItem?.value) ?? '';
|
|
46972
46594
|
patch['type'] = (this.resolveToOptionValue(typeRaw, this.selectConfigOverrides?.['type']?.options) ?? typeRaw) || '';
|
|
46973
46595
|
}
|
|
46974
|
-
if (envCtrl && !envCtrl.dirty) {
|
|
46975
|
-
const envRaw = this.getConfigItemValue('Execution', 'Environment') ?? '';
|
|
46976
|
-
patch['environment'] =
|
|
46977
|
-
(this.resolveToOptionValue(envRaw, this.selectConfigOverrides?.['environment']?.options) ?? envRaw) || '';
|
|
46978
|
-
}
|
|
46979
46596
|
// For Test Data Profile / Set, allow one-time re-resolve from config when options arrive,
|
|
46980
46597
|
// but never overwrite a user-edited (dirty) value.
|
|
46981
46598
|
if (tdpCtrl && !tdpCtrl.dirty) {
|
|
@@ -47047,11 +46664,9 @@ class TestCaseDetailsEditComponent {
|
|
|
47047
46664
|
const knowledgeBaseDefaultTestCase = this.resolveToOptionValue(knowledgeBaseDefaultTestCaseRaw, this.selectConfigOverrides?.['knowledgeBaseDefaultTestCase']?.options) ?? knowledgeBaseDefaultTestCaseRaw;
|
|
47048
46665
|
const prerequisiteCases = this.getPrerequisiteCasesFromConfig();
|
|
47049
46666
|
const typeRaw = (this.getConfigItemValue('Execution', 'Type') || this.typeItem?.value) ?? '';
|
|
47050
|
-
const environmentRaw = this.getConfigItemValue('Execution', 'Environment') ?? '';
|
|
47051
46667
|
const testDataProfileRaw = this.getConfigItemValue('Execution', 'Test Data Profile') ?? '';
|
|
47052
46668
|
const testDataSetRaw = this.normalizeTestDataSetRawValue(this.getConfigItemValue('Execution', 'Test Data Set') ?? '');
|
|
47053
46669
|
const typeVal = this.resolveToOptionValue(typeRaw, this.selectConfigOverrides?.['type']?.options) ?? typeRaw;
|
|
47054
|
-
const environmentVal = this.resolveToOptionValue(environmentRaw, this.selectConfigOverrides?.['environment']?.options) ?? environmentRaw;
|
|
47055
46670
|
const testDataProfileVal = this.resolveToOptionValue(testDataProfileRaw, this.selectConfigOverrides?.['testDataProfile']?.options) ?? testDataProfileRaw;
|
|
47056
46671
|
const testDataSetVal = this.resolveToOptionValue(testDataSetRaw, this.selectConfigOverrides?.['testDataSet']?.options) ?? testDataSetRaw;
|
|
47057
46672
|
const defaultBrowser = this.getConfigItemValue('Execution', 'Default Browser');
|
|
@@ -47085,15 +46700,11 @@ class TestCaseDetailsEditComponent {
|
|
|
47085
46700
|
patch['prerequisiteCases'] = prerequisiteCases;
|
|
47086
46701
|
if (typeVal)
|
|
47087
46702
|
patch['type'] = typeVal;
|
|
47088
|
-
// Re-sync
|
|
47089
|
-
const envCtrl2 = this.editForm.get('environment');
|
|
46703
|
+
// Re-sync Test Data Profile / Set from config only when controls are NOT dirty
|
|
47090
46704
|
const tdpCtrl2 = this.editForm.get('testDataProfile');
|
|
47091
46705
|
const tdsCtrl2 = this.editForm.get('testDataSet');
|
|
47092
|
-
const preserveEnv2 = envCtrl2?.dirty;
|
|
47093
46706
|
const preserveTdp2 = tdpCtrl2?.dirty;
|
|
47094
46707
|
const preserveTds2 = tdsCtrl2?.dirty;
|
|
47095
|
-
if (environmentVal && !preserveEnv2)
|
|
47096
|
-
patch['environment'] = environmentVal;
|
|
47097
46708
|
if (testDataProfileVal && !preserveTdp2)
|
|
47098
46709
|
patch['testDataProfile'] = testDataProfileVal;
|
|
47099
46710
|
if (testDataSetVal != null && testDataSetVal !== '' && !preserveTds2)
|
|
@@ -47149,7 +46760,6 @@ class TestCaseDetailsEditComponent {
|
|
|
47149
46760
|
: [];
|
|
47150
46761
|
const prerequisiteCaseValue = prerequisiteCases.length ? prerequisiteCases.join(',') : null;
|
|
47151
46762
|
const typeValue = this.editForm.get('type')?.value ?? '';
|
|
47152
|
-
const environmentValue = this.editForm.get('environment')?.value ?? '';
|
|
47153
46763
|
const testDataProfileValue = this.editForm.get('testDataProfile')?.value ?? '';
|
|
47154
46764
|
const testDataSetValue = this.editForm.get('testDataSet')?.value ?? '';
|
|
47155
46765
|
return this.configSections.map((section) => {
|
|
@@ -47163,8 +46773,6 @@ class TestCaseDetailsEditComponent {
|
|
|
47163
46773
|
return { ...item, value: prerequisiteCaseValue };
|
|
47164
46774
|
if (item.label === 'Type')
|
|
47165
46775
|
return { ...item, value: typeValue };
|
|
47166
|
-
if (item.label === 'Environment')
|
|
47167
|
-
return { ...item, value: environmentValue };
|
|
47168
46776
|
if (item.label === 'Test Data Profile')
|
|
47169
46777
|
return { ...item, value: testDataProfileValue };
|
|
47170
46778
|
if (item.label === 'Test Data Set')
|
|
@@ -47297,10 +46905,10 @@ class TestCaseDetailsEditComponent {
|
|
|
47297
46905
|
}
|
|
47298
46906
|
}
|
|
47299
46907
|
TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
47300
|
-
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 });
|
|
46908
|
+
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 });
|
|
47301
46909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
|
|
47302
46910
|
type: Component,
|
|
47303
|
-
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" }]
|
|
46911
|
+
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" }]
|
|
47304
46912
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { descriptionTitle: [{
|
|
47305
46913
|
type: Input
|
|
47306
46914
|
}], descriptionContent: [{
|
|
@@ -49669,7 +49277,7 @@ class ConditionBranchEditorComponent {
|
|
|
49669
49277
|
}
|
|
49670
49278
|
}
|
|
49671
49279
|
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 });
|
|
49672
|
-
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 });
|
|
49280
|
+
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 });
|
|
49673
49281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, decorators: [{
|
|
49674
49282
|
type: Component,
|
|
49675
49283
|
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: [] }]
|
|
@@ -50711,137 +50319,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
50711
50319
|
type: Output
|
|
50712
50320
|
}] } });
|
|
50713
50321
|
|
|
50714
|
-
/**
|
|
50715
|
-
* Tag chip-list + autocomplete used by the New / Edit Global Variable dialog.
|
|
50716
|
-
* Mirrors the React `TagsEditor` block in
|
|
50717
|
-
* `Environment and Data Management_CD Deisgns/src/Global.jsx:179-237`:
|
|
50718
|
-
*
|
|
50719
|
-
* [chip × …] [+ Add tag] ← inactive state
|
|
50720
|
-
* [chip × …] [_input_ ↳ suggestions] ← active state
|
|
50721
|
-
*
|
|
50722
|
-
* Behavior:
|
|
50723
|
-
* - Backspace on an empty input removes the last tag.
|
|
50724
|
-
* - Enter commits the trimmed lowercase value (creates if not in available).
|
|
50725
|
-
* - Escape exits the input without committing.
|
|
50726
|
-
* - Suggestions are computed from `availableTags`, capped at 4.
|
|
50727
|
-
*/
|
|
50728
|
-
class GlobalVariableTagsInputComponent {
|
|
50729
|
-
constructor(cdr) {
|
|
50730
|
-
this.cdr = cdr;
|
|
50731
|
-
this.tags = [];
|
|
50732
|
-
this.availableTags = [];
|
|
50733
|
-
this.tagsChange = new EventEmitter();
|
|
50734
|
-
this.adding = false;
|
|
50735
|
-
this.draft = '';
|
|
50736
|
-
}
|
|
50737
|
-
get suggestions() {
|
|
50738
|
-
const typed = this.draft.trim().toLowerCase();
|
|
50739
|
-
const taken = new Set((this.tags ?? []).map(t => t.toLowerCase()));
|
|
50740
|
-
const pool = (this.availableTags ?? []).filter(t => !taken.has((t.name ?? '').toLowerCase()));
|
|
50741
|
-
if (typed.length === 0) {
|
|
50742
|
-
return pool.slice(0, 4);
|
|
50743
|
-
}
|
|
50744
|
-
return pool
|
|
50745
|
-
.filter(t => (t.name ?? '').toLowerCase().startsWith(typed))
|
|
50746
|
-
.slice(0, 4);
|
|
50747
|
-
}
|
|
50748
|
-
beginAdd() {
|
|
50749
|
-
this.adding = true;
|
|
50750
|
-
this.draft = '';
|
|
50751
|
-
this.cdr.markForCheck();
|
|
50752
|
-
setTimeout(() => this.tagInputRef?.nativeElement.focus(), 0);
|
|
50753
|
-
}
|
|
50754
|
-
onDraftChange(next) {
|
|
50755
|
-
this.draft = next ?? '';
|
|
50756
|
-
this.cdr.markForCheck();
|
|
50757
|
-
}
|
|
50758
|
-
onKeyDown(event) {
|
|
50759
|
-
if (event.key === 'Enter') {
|
|
50760
|
-
event.preventDefault();
|
|
50761
|
-
this.commitDraft();
|
|
50762
|
-
}
|
|
50763
|
-
else if (event.key === 'Escape') {
|
|
50764
|
-
event.preventDefault();
|
|
50765
|
-
this.cancelAdd();
|
|
50766
|
-
}
|
|
50767
|
-
else if (event.key === 'Backspace' && !this.draft && this.tags.length > 0) {
|
|
50768
|
-
event.preventDefault();
|
|
50769
|
-
this.removeAt(this.tags.length - 1);
|
|
50770
|
-
}
|
|
50771
|
-
}
|
|
50772
|
-
onSuggestionMouseDown(event, suggestion) {
|
|
50773
|
-
// mouseDown beats blur so the click registers before the input loses focus
|
|
50774
|
-
event.preventDefault();
|
|
50775
|
-
this.commit(suggestion.name);
|
|
50776
|
-
}
|
|
50777
|
-
onBlur() {
|
|
50778
|
-
// Defer so suggestion click has a chance to fire first
|
|
50779
|
-
setTimeout(() => {
|
|
50780
|
-
if (!this.adding) {
|
|
50781
|
-
return;
|
|
50782
|
-
}
|
|
50783
|
-
this.commitDraft();
|
|
50784
|
-
}, 150);
|
|
50785
|
-
}
|
|
50786
|
-
removeAt(index) {
|
|
50787
|
-
const next = (this.tags ?? []).filter((_, i) => i !== index);
|
|
50788
|
-
this.tags = next;
|
|
50789
|
-
this.tagsChange.emit(next);
|
|
50790
|
-
this.cdr.markForCheck();
|
|
50791
|
-
}
|
|
50792
|
-
commitDraft() {
|
|
50793
|
-
const raw = (this.draft ?? '').trim().toLowerCase();
|
|
50794
|
-
if (!raw) {
|
|
50795
|
-
this.cancelAdd();
|
|
50796
|
-
return;
|
|
50797
|
-
}
|
|
50798
|
-
this.commit(raw);
|
|
50799
|
-
}
|
|
50800
|
-
commit(name) {
|
|
50801
|
-
const normalized = (name ?? '').trim().toLowerCase();
|
|
50802
|
-
if (!normalized) {
|
|
50803
|
-
return;
|
|
50804
|
-
}
|
|
50805
|
-
const taken = new Set((this.tags ?? []).map(t => t.toLowerCase()));
|
|
50806
|
-
if (taken.has(normalized)) {
|
|
50807
|
-
this.cancelAdd();
|
|
50808
|
-
return;
|
|
50809
|
-
}
|
|
50810
|
-
const next = [...(this.tags ?? []), normalized];
|
|
50811
|
-
this.tags = next;
|
|
50812
|
-
this.tagsChange.emit(next);
|
|
50813
|
-
this.draft = '';
|
|
50814
|
-
this.adding = false;
|
|
50815
|
-
this.cdr.markForCheck();
|
|
50816
|
-
}
|
|
50817
|
-
cancelAdd() {
|
|
50818
|
-
this.adding = false;
|
|
50819
|
-
this.draft = '';
|
|
50820
|
-
this.cdr.markForCheck();
|
|
50821
|
-
}
|
|
50822
|
-
}
|
|
50823
|
-
GlobalVariableTagsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GlobalVariableTagsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
50824
|
-
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 });
|
|
50825
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GlobalVariableTagsInputComponent, decorators: [{
|
|
50826
|
-
type: Component,
|
|
50827
|
-
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" }]
|
|
50828
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tags: [{
|
|
50829
|
-
type: Input
|
|
50830
|
-
}], availableTags: [{
|
|
50831
|
-
type: Input
|
|
50832
|
-
}], tagsChange: [{
|
|
50833
|
-
type: Output
|
|
50834
|
-
}], tagInputRef: [{
|
|
50835
|
-
type: ViewChild,
|
|
50836
|
-
args: ['tagInput']
|
|
50837
|
-
}] } });
|
|
50838
|
-
|
|
50839
50322
|
class NewGlobalVariableDialogComponent {
|
|
50840
50323
|
constructor(cdr) {
|
|
50841
50324
|
this.cdr = cdr;
|
|
50842
50325
|
this.mode = 'create';
|
|
50843
50326
|
this.existingNames = [];
|
|
50844
|
-
this.availableTags = [];
|
|
50845
50327
|
this.typeOptions = ['String', 'Number', 'Boolean', 'Password'];
|
|
50846
50328
|
this.typeDropdownOptions = [
|
|
50847
50329
|
{ label: 'String', value: 'String' },
|
|
@@ -50858,7 +50340,6 @@ class NewGlobalVariableDialogComponent {
|
|
|
50858
50340
|
this.value = '';
|
|
50859
50341
|
this.readWriteMode = 'RW';
|
|
50860
50342
|
this.description = '';
|
|
50861
|
-
this.tags = [];
|
|
50862
50343
|
this.passwordTouched = false;
|
|
50863
50344
|
this.nameError = null;
|
|
50864
50345
|
this.valueError = null;
|
|
@@ -50870,7 +50351,6 @@ class NewGlobalVariableDialogComponent {
|
|
|
50870
50351
|
this.value = this.initialValue.value ?? '';
|
|
50871
50352
|
this.readWriteMode = this.initialValue.readWriteMode ?? 'RW';
|
|
50872
50353
|
this.description = this.initialValue.description ?? '';
|
|
50873
|
-
this.tags = Array.isArray(this.initialValue.tags) ? [...this.initialValue.tags] : [];
|
|
50874
50354
|
}
|
|
50875
50355
|
if (this.type === 'Boolean' && this.value !== 'true' && this.value !== 'false') {
|
|
50876
50356
|
this.value = 'false';
|
|
@@ -50966,10 +50446,6 @@ class NewGlobalVariableDialogComponent {
|
|
|
50966
50446
|
this.description = next;
|
|
50967
50447
|
this.cdr.markForCheck();
|
|
50968
50448
|
}
|
|
50969
|
-
onTagsChange(next) {
|
|
50970
|
-
this.tags = Array.isArray(next) ? [...next] : [];
|
|
50971
|
-
this.cdr.markForCheck();
|
|
50972
|
-
}
|
|
50973
50449
|
/**
|
|
50974
50450
|
* Called by the host (via DialogRef.getComponentInstance()) when the primary
|
|
50975
50451
|
* button is clicked. Returns the captured value when valid, or null when the
|
|
@@ -51003,7 +50479,6 @@ class NewGlobalVariableDialogComponent {
|
|
|
51003
50479
|
value: omitPasswordValue ? null : this.serializeValue(),
|
|
51004
50480
|
readWriteMode: this.readWriteMode,
|
|
51005
50481
|
description: this.description ? this.description : null,
|
|
51006
|
-
tags: [...this.tags],
|
|
51007
50482
|
};
|
|
51008
50483
|
}
|
|
51009
50484
|
serializeValue() {
|
|
@@ -51029,18 +50504,16 @@ class NewGlobalVariableDialogComponent {
|
|
|
51029
50504
|
}
|
|
51030
50505
|
}
|
|
51031
50506
|
NewGlobalVariableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewGlobalVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
51032
|
-
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"
|
|
50507
|
+
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 });
|
|
51033
50508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewGlobalVariableDialogComponent, decorators: [{
|
|
51034
50509
|
type: Component,
|
|
51035
|
-
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 <!--
|
|
50510
|
+
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" }]
|
|
51036
50511
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
|
|
51037
50512
|
type: Input
|
|
51038
50513
|
}], initialValue: [{
|
|
51039
50514
|
type: Input
|
|
51040
50515
|
}], existingNames: [{
|
|
51041
50516
|
type: Input
|
|
51042
|
-
}], availableTags: [{
|
|
51043
|
-
type: Input
|
|
51044
50517
|
}] } });
|
|
51045
50518
|
|
|
51046
50519
|
const ENVIRONMENT_ACCENT_COLORS = [
|
|
@@ -52330,7 +51803,6 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
52330
51803
|
CaptureVideoDialogComponent,
|
|
52331
51804
|
SubStepsConfirmationDialogComponent,
|
|
52332
51805
|
NewGlobalVariableDialogComponent,
|
|
52333
|
-
GlobalVariableTagsInputComponent,
|
|
52334
51806
|
NewEnvironmentDialogComponent,
|
|
52335
51807
|
NewEnvironmentVariableDialogComponent,
|
|
52336
51808
|
NewDbConfigDialogComponent,
|
|
@@ -52525,7 +51997,6 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
52525
51997
|
CaptureVideoDialogComponent,
|
|
52526
51998
|
SubStepsConfirmationDialogComponent,
|
|
52527
51999
|
NewGlobalVariableDialogComponent,
|
|
52528
|
-
GlobalVariableTagsInputComponent,
|
|
52529
52000
|
NewEnvironmentDialogComponent,
|
|
52530
52001
|
NewEnvironmentVariableDialogComponent,
|
|
52531
52002
|
NewDbConfigDialogComponent,
|
|
@@ -52765,7 +52236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52765
52236
|
CaptureVideoDialogComponent,
|
|
52766
52237
|
SubStepsConfirmationDialogComponent,
|
|
52767
52238
|
NewGlobalVariableDialogComponent,
|
|
52768
|
-
GlobalVariableTagsInputComponent,
|
|
52769
52239
|
NewEnvironmentDialogComponent,
|
|
52770
52240
|
NewEnvironmentVariableDialogComponent,
|
|
52771
52241
|
NewDbConfigDialogComponent,
|
|
@@ -52966,7 +52436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
52966
52436
|
CaptureVideoDialogComponent,
|
|
52967
52437
|
SubStepsConfirmationDialogComponent,
|
|
52968
52438
|
NewGlobalVariableDialogComponent,
|
|
52969
|
-
GlobalVariableTagsInputComponent,
|
|
52970
52439
|
NewEnvironmentDialogComponent,
|
|
52971
52440
|
NewEnvironmentVariableDialogComponent,
|
|
52972
52441
|
NewDbConfigDialogComponent,
|
|
@@ -53606,7 +53075,6 @@ const TEST_CASE_DETAILS_FIELD_MAP = {
|
|
|
53606
53075
|
},
|
|
53607
53076
|
/** Execution config */
|
|
53608
53077
|
execution: {
|
|
53609
|
-
environment: 'environment',
|
|
53610
53078
|
prerequisiteCase: 'prerequisiteCase',
|
|
53611
53079
|
defaultBrowser: 'defaultBrowser',
|
|
53612
53080
|
videoRecording: 'videoRecording',
|
|
@@ -53680,7 +53148,6 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53680
53148
|
title: 'Execution',
|
|
53681
53149
|
icon: 'play_circle',
|
|
53682
53150
|
items: [
|
|
53683
|
-
{ label: 'Environment', value: data.environment ?? data.environmentId ?? null },
|
|
53684
53151
|
{ label: 'Type', value: data.type ?? data.typeId ?? null },
|
|
53685
53152
|
{ label: 'Test Data Profile', value: data.testDataProfile ?? data.testDataProfileId ?? null },
|
|
53686
53153
|
{ label: 'Test Data Set', value: data.testDataSet ?? data.testDataSetIndex ?? null },
|
|
@@ -53754,5 +53221,5 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
53754
53221
|
* Generated bundle index. Do not edit.
|
|
53755
53222
|
*/
|
|
53756
53223
|
|
|
53757
|
-
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,
|
|
53224
|
+
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 };
|
|
53758
53225
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|