@cqa-lib/cqa-ui 1.1.368 → 1.1.369
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/execution-screen/jump-to-step-modal/jump-to-step-modal.component.mjs +145 -17
- package/fesm2015/cqa-lib-cqa-ui.mjs +147 -16
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +144 -16
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/jump-to-step-modal/jump-to-step-modal.component.d.ts +44 -3
- package/package.json +1 -1
|
@@ -15039,13 +15039,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15039
15039
|
}] } });
|
|
15040
15040
|
|
|
15041
15041
|
class JumpToStepModalComponent {
|
|
15042
|
-
constructor() {
|
|
15042
|
+
constructor(cdr) {
|
|
15043
|
+
this.cdr = cdr;
|
|
15043
15044
|
/** Whether the modal is open */
|
|
15044
15045
|
this.isOpen = false;
|
|
15045
15046
|
/** Modal title */
|
|
15046
15047
|
this.title = 'Jump to Step';
|
|
15047
|
-
/** List of step items to display */
|
|
15048
|
+
/** List of step items to display (legacy; used when combinedTestCases not provided) */
|
|
15048
15049
|
this.items = [];
|
|
15050
|
+
/** Combined test cases for accordion layout. When provided with stepsMeta, used instead of items. */
|
|
15051
|
+
this.combinedTestCases = [];
|
|
15052
|
+
/** Pre-computed step metadata (stepNumber, status, etc.) for each step. Required when using combinedTestCases. */
|
|
15053
|
+
this.stepsMeta = [];
|
|
15049
15054
|
/** Search placeholder text */
|
|
15050
15055
|
this.searchPlaceholder = 'Search steps by name or number...';
|
|
15051
15056
|
/** Search Empty State text */
|
|
@@ -15054,8 +15059,16 @@ class JumpToStepModalComponent {
|
|
|
15054
15059
|
this.searchValue = '';
|
|
15055
15060
|
/** Whether search is enabled */
|
|
15056
15061
|
this.enableSearch = true;
|
|
15062
|
+
/** Whether to show prerequisite steps section. Default true. */
|
|
15063
|
+
this.showPrerequisites = true;
|
|
15057
15064
|
/** Filtered items based on search */
|
|
15058
15065
|
this.filteredItems = [];
|
|
15066
|
+
/** Prerequisite groups for accordion: each prerequisite test case by name. */
|
|
15067
|
+
this.prerequisiteGroups = [];
|
|
15068
|
+
/** Filtered non-prerequisite step items. */
|
|
15069
|
+
this.filteredStepItems = [];
|
|
15070
|
+
/** Expanded prerequisite group names. When empty, all groups are collapsed by default. */
|
|
15071
|
+
this.expandedGroupNames = new Set();
|
|
15059
15072
|
/** Emitted when modal should be closed */
|
|
15060
15073
|
this.onClose = new EventEmitter();
|
|
15061
15074
|
/** Emitted when search value changes */
|
|
@@ -15064,25 +15077,137 @@ class JumpToStepModalComponent {
|
|
|
15064
15077
|
this.onSelect = new EventEmitter();
|
|
15065
15078
|
}
|
|
15066
15079
|
ngOnChanges(changes) {
|
|
15067
|
-
if (changes['items'] || changes['searchValue']) {
|
|
15080
|
+
if (changes['items'] || changes['combinedTestCases'] || changes['stepsMeta'] || changes['searchValue']) {
|
|
15068
15081
|
this.updateFilteredItems();
|
|
15069
15082
|
}
|
|
15070
15083
|
}
|
|
15071
15084
|
updateFilteredItems() {
|
|
15072
|
-
|
|
15085
|
+
var _a, _b, _c;
|
|
15086
|
+
if (((_a = this.combinedTestCases) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.stepsMeta) === null || _b === void 0 ? void 0 : _b.length)) {
|
|
15087
|
+
this.buildFromCombinedTestCases();
|
|
15088
|
+
}
|
|
15089
|
+
else if ((_c = this.items) === null || _c === void 0 ? void 0 : _c.length) {
|
|
15090
|
+
this.buildFromItems();
|
|
15091
|
+
}
|
|
15092
|
+
else {
|
|
15073
15093
|
this.filteredItems = [];
|
|
15074
|
-
|
|
15094
|
+
this.prerequisiteGroups = [];
|
|
15095
|
+
this.filteredStepItems = [];
|
|
15075
15096
|
}
|
|
15076
|
-
|
|
15097
|
+
}
|
|
15098
|
+
buildFromCombinedTestCases() {
|
|
15099
|
+
var _a;
|
|
15100
|
+
const metaByStepId = new Map();
|
|
15101
|
+
this.stepsMeta.forEach(m => metaByStepId.set(m.stepId, m));
|
|
15102
|
+
const searchTerm = (this.searchValue || '').toLowerCase().trim();
|
|
15103
|
+
const matchesSearch = (meta) => {
|
|
15104
|
+
if (!searchTerm)
|
|
15105
|
+
return true;
|
|
15106
|
+
return (String(meta.stepNumber).toLowerCase().includes(searchTerm) ||
|
|
15107
|
+
(meta.label || '').toLowerCase().includes(searchTerm));
|
|
15108
|
+
};
|
|
15109
|
+
this.prerequisiteGroups = [];
|
|
15110
|
+
this.filteredStepItems = [];
|
|
15111
|
+
for (const group of this.combinedTestCases) {
|
|
15112
|
+
if (!((_a = group === null || group === void 0 ? void 0 : group.steps) === null || _a === void 0 ? void 0 : _a.length))
|
|
15113
|
+
continue;
|
|
15114
|
+
const groupName = (group.name || 'Prerequisite').toString();
|
|
15115
|
+
const isPrereq = !!group.isPrerequisite;
|
|
15116
|
+
const collectSteps = (steps, seen) => {
|
|
15117
|
+
var _a, _b;
|
|
15118
|
+
const out = [];
|
|
15119
|
+
for (const s of steps) {
|
|
15120
|
+
if (!s)
|
|
15121
|
+
continue;
|
|
15122
|
+
const id = (_a = s === null || s === void 0 ? void 0 : s.id) !== null && _a !== void 0 ? _a : s === null || s === void 0 ? void 0 : s.step_id;
|
|
15123
|
+
const numId = id != null ? Number(id) : NaN;
|
|
15124
|
+
if (!Number.isFinite(numId) || seen.has(numId))
|
|
15125
|
+
continue;
|
|
15126
|
+
seen.add(numId);
|
|
15127
|
+
const meta = metaByStepId.get(numId);
|
|
15128
|
+
if (meta && matchesSearch(meta)) {
|
|
15129
|
+
out.push({
|
|
15130
|
+
id: String(numId),
|
|
15131
|
+
stepId: numId,
|
|
15132
|
+
stepNumber: meta.stepNumber,
|
|
15133
|
+
description: this.stripHtml(meta.label || ('Step ' + meta.stepNumber)),
|
|
15134
|
+
status: meta.status,
|
|
15135
|
+
isPrerequisite: meta.isPrerequisite,
|
|
15136
|
+
groupName: meta.groupName,
|
|
15137
|
+
});
|
|
15138
|
+
}
|
|
15139
|
+
for (const arr of [s.children || [], s.nestedSteps || [], s.steps || []]) {
|
|
15140
|
+
if (arr === null || arr === void 0 ? void 0 : arr.length)
|
|
15141
|
+
out.push(...collectSteps(arr, seen));
|
|
15142
|
+
}
|
|
15143
|
+
if (s.branches && Array.isArray(s.branches)) {
|
|
15144
|
+
for (const b of s.branches) {
|
|
15145
|
+
if ((_b = b === null || b === void 0 ? void 0 : b.subSteps) === null || _b === void 0 ? void 0 : _b.length)
|
|
15146
|
+
out.push(...collectSteps(b.subSteps, seen));
|
|
15147
|
+
}
|
|
15148
|
+
}
|
|
15149
|
+
}
|
|
15150
|
+
return out;
|
|
15151
|
+
};
|
|
15152
|
+
const seen = new Set();
|
|
15153
|
+
const items = collectSteps(group.steps, seen);
|
|
15154
|
+
if (isPrereq && this.showPrerequisites) {
|
|
15155
|
+
if (items.length) {
|
|
15156
|
+
this.prerequisiteGroups.push({ name: groupName, items });
|
|
15157
|
+
}
|
|
15158
|
+
}
|
|
15159
|
+
else if (!isPrereq) {
|
|
15160
|
+
this.filteredStepItems.push(...items);
|
|
15161
|
+
}
|
|
15162
|
+
}
|
|
15163
|
+
this.filteredItems = [
|
|
15164
|
+
...this.prerequisiteGroups.reduce((acc, g) => acc.concat(g.items), []),
|
|
15165
|
+
...this.filteredStepItems,
|
|
15166
|
+
];
|
|
15167
|
+
}
|
|
15168
|
+
buildFromItems() {
|
|
15169
|
+
const searchTerm = (this.searchValue || '').toLowerCase().trim();
|
|
15170
|
+
if (!searchTerm) {
|
|
15077
15171
|
this.filteredItems = [...this.items];
|
|
15078
|
-
return;
|
|
15079
15172
|
}
|
|
15080
|
-
|
|
15081
|
-
|
|
15082
|
-
|
|
15083
|
-
|
|
15084
|
-
|
|
15173
|
+
else {
|
|
15174
|
+
this.filteredItems = this.items.filter(item => {
|
|
15175
|
+
const stepNumberMatch = String(item.stepNumber).toLowerCase().includes(searchTerm);
|
|
15176
|
+
const descriptionMatch = (item.description || '').toLowerCase().includes(searchTerm);
|
|
15177
|
+
return stepNumberMatch || descriptionMatch;
|
|
15178
|
+
});
|
|
15179
|
+
}
|
|
15180
|
+
const prereqItems = this.filteredItems.filter(i => i.isPrerequisite === true);
|
|
15181
|
+
const groups = new Map();
|
|
15182
|
+
prereqItems.forEach(item => {
|
|
15183
|
+
const name = (item.groupName || 'Prerequisite').toString();
|
|
15184
|
+
const existing = groups.get(name);
|
|
15185
|
+
if (existing)
|
|
15186
|
+
existing.push(item);
|
|
15187
|
+
else
|
|
15188
|
+
groups.set(name, [item]);
|
|
15085
15189
|
});
|
|
15190
|
+
this.prerequisiteGroups = Array.from(groups.entries()).map(([name, items]) => ({ name, items }));
|
|
15191
|
+
this.filteredStepItems = this.filteredItems.filter(i => i.isPrerequisite !== true);
|
|
15192
|
+
}
|
|
15193
|
+
stripHtml(html) {
|
|
15194
|
+
if (!html)
|
|
15195
|
+
return '';
|
|
15196
|
+
const div = document.createElement('div');
|
|
15197
|
+
div.innerHTML = html;
|
|
15198
|
+
return (div.textContent || div.innerText || '').trim();
|
|
15199
|
+
}
|
|
15200
|
+
isGroupExpanded(name) {
|
|
15201
|
+
return this.expandedGroupNames.has(name);
|
|
15202
|
+
}
|
|
15203
|
+
toggleGroup(name) {
|
|
15204
|
+
if (this.expandedGroupNames.has(name)) {
|
|
15205
|
+
this.expandedGroupNames.delete(name);
|
|
15206
|
+
}
|
|
15207
|
+
else {
|
|
15208
|
+
this.expandedGroupNames.add(name);
|
|
15209
|
+
}
|
|
15210
|
+
this.cdr.markForCheck();
|
|
15086
15211
|
}
|
|
15087
15212
|
onSearchValueChange(value) {
|
|
15088
15213
|
this.searchValue = value;
|
|
@@ -15135,17 +15260,21 @@ class JumpToStepModalComponent {
|
|
|
15135
15260
|
return item.id;
|
|
15136
15261
|
}
|
|
15137
15262
|
}
|
|
15138
|
-
JumpToStepModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15139
|
-
JumpToStepModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: JumpToStepModalComponent, selector: "cqa-jump-to-step-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", searchPlaceholder: "searchPlaceholder", searchEmptyStateLabel: "searchEmptyStateLabel", searchValue: "searchValue", enableSearch: "enableSearch" }, outputs: { onClose: "onClose", onSearch: "onSearch", onSelect: "onSelect" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n {{ title }}\n </h2>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n (click)=\"handleClose()\"\n aria-label=\"Close modal\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n </button>\n </div>\n\n\n <!-- Search Bar -->\n <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\">\n </cqa-search-bar>\n </div>\n\n <!-- Divider below search -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Steps List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n {{searchEmptyStateLabel || 'No Data found.'}}\n </p>\n </div>\n\n <!-- Steps List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col\">\n <
|
|
15263
|
+
JumpToStepModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
15264
|
+
JumpToStepModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: JumpToStepModalComponent, selector: "cqa-jump-to-step-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", combinedTestCases: "combinedTestCases", stepsMeta: "stepsMeta", searchPlaceholder: "searchPlaceholder", searchEmptyStateLabel: "searchEmptyStateLabel", searchValue: "searchValue", enableSearch: "enableSearch", showPrerequisites: "showPrerequisites" }, outputs: { onClose: "onClose", onSearch: "onSearch", onSelect: "onSelect" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n {{ title }}\n </h2>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n (click)=\"handleClose()\"\n aria-label=\"Close modal\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n </button>\n </div>\n\n\n <!-- Search Bar -->\n <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\">\n </cqa-search-bar>\n </div>\n\n <!-- Divider below search -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Steps List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n {{searchEmptyStateLabel || 'No Data found.'}}\n </p>\n </div>\n\n <!-- Steps List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n\n <!-- Prerequisite steps: accordion by test case name (styled like cqa-main-step-collapse) -->\n <ng-container *ngIf=\"showPrerequisites && prerequisiteGroups?.length\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-1\">\n <ng-container *ngFor=\"let group of prerequisiteGroups\">\n <div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid cqa-w-full\"\n (click)=\"toggleGroup(group.name)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <div>\n <svg [class.cqa-rotate-180]=\"isGroupExpanded(group.name)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ group.name }}\n </span>\n </div>\n </div>\n <div *ngIf=\"isGroupExpanded(group.name)\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <button\n *ngFor=\"let item of group.items; trackBy: trackByItemId\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n (click)=\"onItemClick(item)\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n style=\"min-width: 32px;\">{{ item.stepNumber }}</span>\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">{{ item.description }}</span>\n <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">{{ item.status }}</span>\n </button>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"filteredStepItems?.length\" class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB] cqa-my-1 cqa-mb-2\" role=\"presentation\"></div>\n </ng-container>\n\n <!-- Main test steps section -->\n <ng-container *ngIf=\"filteredStepItems?.length\">\n <div class=\"cqa-mb-1\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280] cqa-uppercase cqa-tracking-wide\">\n Test steps\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <button\n *ngFor=\"let item of filteredStepItems; trackBy: trackByItemId\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n (click)=\"onItemClick(item)\">\n\n <!-- Step Number Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n style=\"min-width: 32px;\">\n {{ item.stepNumber }}\n </span>\n\n <!-- Step Description -->\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">\n {{ item.description }}\n </span>\n\n <!-- Status Badge -->\n <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">\n {{ item.status }}\n </span>\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Footer -->\n <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-5 cqa-pt-3\">\n <p class=\"cqa-text-xs cqa-text-[#6B7280] cqa-font-inter cqa-font-normal\">\n {{ itemsCount }} {{ itemsCount === 1 ? 'step' : 'steps' }} found\n </p>\n </div>\n </div>\n</div>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
15140
15265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, decorators: [{
|
|
15141
15266
|
type: Component,
|
|
15142
|
-
args: [{ selector: 'cqa-jump-to-step-modal', host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n {{ title }}\n </h2>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n (click)=\"handleClose()\"\n aria-label=\"Close modal\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n </button>\n </div>\n\n\n <!-- Search Bar -->\n <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\">\n </cqa-search-bar>\n </div>\n\n <!-- Divider below search -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Steps List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n {{searchEmptyStateLabel || 'No Data found.'}}\n </p>\n </div>\n\n <!-- Steps List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col\">\n <
|
|
15143
|
-
}], propDecorators: { isOpen: [{
|
|
15267
|
+
args: [{ selector: 'cqa-jump-to-step-modal', host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808; max-height: 90vh;\"\n (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4\">\n <h2 class=\"cqa-text-base cqa-font-semibold cqa-text-[#0A0A0A] cqa-leading-[24px] cqa-font-inter\">\n {{ title }}\n </h2>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 hover:cqa-text-gray-700 cqa-transition-colors\"\n (click)=\"handleClose()\"\n aria-label=\"Close modal\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px] !cqa-block !cqa-leading-none\">close</mat-icon>\n </button>\n </div>\n\n\n <!-- Search Bar -->\n <div *ngIf=\"enableSearch\" class=\"cqa-px-6 cqa-pb-4\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\">\n </cqa-search-bar>\n </div>\n\n <!-- Divider below search -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Steps List -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-2\" style=\"scrollbar-width: thin;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-gray-500 cqa-font-inter\">\n {{searchEmptyStateLabel || 'No Data found.'}}\n </p>\n </div>\n\n <!-- Steps List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n\n <!-- Prerequisite steps: accordion by test case name (styled like cqa-main-step-collapse) -->\n <ng-container *ngIf=\"showPrerequisites && prerequisiteGroups?.length\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-1\">\n <ng-container *ngFor=\"let group of prerequisiteGroups\">\n <div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid cqa-w-full\"\n (click)=\"toggleGroup(group.name)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <div>\n <svg [class.cqa-rotate-180]=\"isGroupExpanded(group.name)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ group.name }}\n </span>\n </div>\n </div>\n <div *ngIf=\"isGroupExpanded(group.name)\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <button\n *ngFor=\"let item of group.items; trackBy: trackByItemId\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n (click)=\"onItemClick(item)\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n style=\"min-width: 32px;\">{{ item.stepNumber }}</span>\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">{{ item.description }}</span>\n <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">{{ item.status }}</span>\n </button>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"filteredStepItems?.length\" class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB] cqa-my-1 cqa-mb-2\" role=\"presentation\"></div>\n </ng-container>\n\n <!-- Main test steps section -->\n <ng-container *ngIf=\"filteredStepItems?.length\">\n <div class=\"cqa-mb-1\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280] cqa-uppercase cqa-tracking-wide\">\n Test steps\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <button\n *ngFor=\"let item of filteredStepItems; trackBy: trackByItemId\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-3 cqa-w-full cqa-text-left cqa-border-0 cqa-bg-transparent hover:cqa-bg-gray-50 cqa-cursor-pointer cqa-transition-colors cqa-rounded-md cqa-min-w-0\"\n (click)=\"onItemClick(item)\">\n\n <!-- Step Number Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-[6px] cqa-text-xs cqa-font-medium cqa-py-[4px] cqa-px-[10px] cqa-flex-shrink-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-text-[#3F43EE] cqa-bg-[#F8F9FF]\"\n style=\"min-width: 32px;\">\n {{ item.stepNumber }}\n </span>\n\n <!-- Step Description -->\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-[#0A0A0A] cqa-font-inter cqa-font-normal cqa-leading-[20px] cqa-min-w-0 cqa-truncate\">\n {{ item.description }}\n </span>\n\n <!-- Status Badge -->\n <span class=\"cqa-flex-shrink-0\" [ngClass]=\"getStatusBadgeClasses(item.status)\">\n {{ item.status }}\n </span>\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Footer -->\n <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-5 cqa-pt-3\">\n <p class=\"cqa-text-xs cqa-text-[#6B7280] cqa-font-inter cqa-font-normal\">\n {{ itemsCount }} {{ itemsCount === 1 ? 'step' : 'steps' }} found\n </p>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
15268
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
|
|
15144
15269
|
type: Input
|
|
15145
15270
|
}], title: [{
|
|
15146
15271
|
type: Input
|
|
15147
15272
|
}], items: [{
|
|
15148
15273
|
type: Input
|
|
15274
|
+
}], combinedTestCases: [{
|
|
15275
|
+
type: Input
|
|
15276
|
+
}], stepsMeta: [{
|
|
15277
|
+
type: Input
|
|
15149
15278
|
}], searchPlaceholder: [{
|
|
15150
15279
|
type: Input
|
|
15151
15280
|
}], searchEmptyStateLabel: [{
|
|
@@ -15154,6 +15283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15154
15283
|
type: Input
|
|
15155
15284
|
}], enableSearch: [{
|
|
15156
15285
|
type: Input
|
|
15286
|
+
}], showPrerequisites: [{
|
|
15287
|
+
type: Input
|
|
15157
15288
|
}], onClose: [{
|
|
15158
15289
|
type: Output
|
|
15159
15290
|
}], onSearch: [{
|