@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
|
@@ -15104,13 +15104,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15104
15104
|
}] } });
|
|
15105
15105
|
|
|
15106
15106
|
class JumpToStepModalComponent {
|
|
15107
|
-
constructor() {
|
|
15107
|
+
constructor(cdr) {
|
|
15108
|
+
this.cdr = cdr;
|
|
15108
15109
|
/** Whether the modal is open */
|
|
15109
15110
|
this.isOpen = false;
|
|
15110
15111
|
/** Modal title */
|
|
15111
15112
|
this.title = 'Jump to Step';
|
|
15112
|
-
/** List of step items to display */
|
|
15113
|
+
/** List of step items to display (legacy; used when combinedTestCases not provided) */
|
|
15113
15114
|
this.items = [];
|
|
15115
|
+
/** Combined test cases for accordion layout. When provided with stepsMeta, used instead of items. */
|
|
15116
|
+
this.combinedTestCases = [];
|
|
15117
|
+
/** Pre-computed step metadata (stepNumber, status, etc.) for each step. Required when using combinedTestCases. */
|
|
15118
|
+
this.stepsMeta = [];
|
|
15114
15119
|
/** Search placeholder text */
|
|
15115
15120
|
this.searchPlaceholder = 'Search steps by name or number...';
|
|
15116
15121
|
/** Search Empty State text */
|
|
@@ -15119,8 +15124,16 @@ class JumpToStepModalComponent {
|
|
|
15119
15124
|
this.searchValue = '';
|
|
15120
15125
|
/** Whether search is enabled */
|
|
15121
15126
|
this.enableSearch = true;
|
|
15127
|
+
/** Whether to show prerequisite steps section. Default true. */
|
|
15128
|
+
this.showPrerequisites = true;
|
|
15122
15129
|
/** Filtered items based on search */
|
|
15123
15130
|
this.filteredItems = [];
|
|
15131
|
+
/** Prerequisite groups for accordion: each prerequisite test case by name. */
|
|
15132
|
+
this.prerequisiteGroups = [];
|
|
15133
|
+
/** Filtered non-prerequisite step items. */
|
|
15134
|
+
this.filteredStepItems = [];
|
|
15135
|
+
/** Expanded prerequisite group names. When empty, all groups are collapsed by default. */
|
|
15136
|
+
this.expandedGroupNames = new Set();
|
|
15124
15137
|
/** Emitted when modal should be closed */
|
|
15125
15138
|
this.onClose = new EventEmitter();
|
|
15126
15139
|
/** Emitted when search value changes */
|
|
@@ -15129,25 +15142,134 @@ class JumpToStepModalComponent {
|
|
|
15129
15142
|
this.onSelect = new EventEmitter();
|
|
15130
15143
|
}
|
|
15131
15144
|
ngOnChanges(changes) {
|
|
15132
|
-
if (changes['items'] || changes['searchValue']) {
|
|
15145
|
+
if (changes['items'] || changes['combinedTestCases'] || changes['stepsMeta'] || changes['searchValue']) {
|
|
15133
15146
|
this.updateFilteredItems();
|
|
15134
15147
|
}
|
|
15135
15148
|
}
|
|
15136
15149
|
updateFilteredItems() {
|
|
15137
|
-
if (
|
|
15150
|
+
if (this.combinedTestCases?.length && this.stepsMeta?.length) {
|
|
15151
|
+
this.buildFromCombinedTestCases();
|
|
15152
|
+
}
|
|
15153
|
+
else if (this.items?.length) {
|
|
15154
|
+
this.buildFromItems();
|
|
15155
|
+
}
|
|
15156
|
+
else {
|
|
15138
15157
|
this.filteredItems = [];
|
|
15139
|
-
|
|
15158
|
+
this.prerequisiteGroups = [];
|
|
15159
|
+
this.filteredStepItems = [];
|
|
15140
15160
|
}
|
|
15141
|
-
|
|
15161
|
+
}
|
|
15162
|
+
buildFromCombinedTestCases() {
|
|
15163
|
+
const metaByStepId = new Map();
|
|
15164
|
+
this.stepsMeta.forEach(m => metaByStepId.set(m.stepId, m));
|
|
15165
|
+
const searchTerm = (this.searchValue || '').toLowerCase().trim();
|
|
15166
|
+
const matchesSearch = (meta) => {
|
|
15167
|
+
if (!searchTerm)
|
|
15168
|
+
return true;
|
|
15169
|
+
return (String(meta.stepNumber).toLowerCase().includes(searchTerm) ||
|
|
15170
|
+
(meta.label || '').toLowerCase().includes(searchTerm));
|
|
15171
|
+
};
|
|
15172
|
+
this.prerequisiteGroups = [];
|
|
15173
|
+
this.filteredStepItems = [];
|
|
15174
|
+
for (const group of this.combinedTestCases) {
|
|
15175
|
+
if (!group?.steps?.length)
|
|
15176
|
+
continue;
|
|
15177
|
+
const groupName = (group.name || 'Prerequisite').toString();
|
|
15178
|
+
const isPrereq = !!group.isPrerequisite;
|
|
15179
|
+
const collectSteps = (steps, seen) => {
|
|
15180
|
+
const out = [];
|
|
15181
|
+
for (const s of steps) {
|
|
15182
|
+
if (!s)
|
|
15183
|
+
continue;
|
|
15184
|
+
const id = s?.id ?? s?.step_id;
|
|
15185
|
+
const numId = id != null ? Number(id) : NaN;
|
|
15186
|
+
if (!Number.isFinite(numId) || seen.has(numId))
|
|
15187
|
+
continue;
|
|
15188
|
+
seen.add(numId);
|
|
15189
|
+
const meta = metaByStepId.get(numId);
|
|
15190
|
+
if (meta && matchesSearch(meta)) {
|
|
15191
|
+
out.push({
|
|
15192
|
+
id: String(numId),
|
|
15193
|
+
stepId: numId,
|
|
15194
|
+
stepNumber: meta.stepNumber,
|
|
15195
|
+
description: this.stripHtml(meta.label || ('Step ' + meta.stepNumber)),
|
|
15196
|
+
status: meta.status,
|
|
15197
|
+
isPrerequisite: meta.isPrerequisite,
|
|
15198
|
+
groupName: meta.groupName,
|
|
15199
|
+
});
|
|
15200
|
+
}
|
|
15201
|
+
for (const arr of [s.children || [], s.nestedSteps || [], s.steps || []]) {
|
|
15202
|
+
if (arr?.length)
|
|
15203
|
+
out.push(...collectSteps(arr, seen));
|
|
15204
|
+
}
|
|
15205
|
+
if (s.branches && Array.isArray(s.branches)) {
|
|
15206
|
+
for (const b of s.branches) {
|
|
15207
|
+
if (b?.subSteps?.length)
|
|
15208
|
+
out.push(...collectSteps(b.subSteps, seen));
|
|
15209
|
+
}
|
|
15210
|
+
}
|
|
15211
|
+
}
|
|
15212
|
+
return out;
|
|
15213
|
+
};
|
|
15214
|
+
const seen = new Set();
|
|
15215
|
+
const items = collectSteps(group.steps, seen);
|
|
15216
|
+
if (isPrereq && this.showPrerequisites) {
|
|
15217
|
+
if (items.length) {
|
|
15218
|
+
this.prerequisiteGroups.push({ name: groupName, items });
|
|
15219
|
+
}
|
|
15220
|
+
}
|
|
15221
|
+
else if (!isPrereq) {
|
|
15222
|
+
this.filteredStepItems.push(...items);
|
|
15223
|
+
}
|
|
15224
|
+
}
|
|
15225
|
+
this.filteredItems = [
|
|
15226
|
+
...this.prerequisiteGroups.reduce((acc, g) => acc.concat(g.items), []),
|
|
15227
|
+
...this.filteredStepItems,
|
|
15228
|
+
];
|
|
15229
|
+
}
|
|
15230
|
+
buildFromItems() {
|
|
15231
|
+
const searchTerm = (this.searchValue || '').toLowerCase().trim();
|
|
15232
|
+
if (!searchTerm) {
|
|
15142
15233
|
this.filteredItems = [...this.items];
|
|
15143
|
-
return;
|
|
15144
15234
|
}
|
|
15145
|
-
|
|
15146
|
-
|
|
15147
|
-
|
|
15148
|
-
|
|
15149
|
-
|
|
15235
|
+
else {
|
|
15236
|
+
this.filteredItems = this.items.filter(item => {
|
|
15237
|
+
const stepNumberMatch = String(item.stepNumber).toLowerCase().includes(searchTerm);
|
|
15238
|
+
const descriptionMatch = (item.description || '').toLowerCase().includes(searchTerm);
|
|
15239
|
+
return stepNumberMatch || descriptionMatch;
|
|
15240
|
+
});
|
|
15241
|
+
}
|
|
15242
|
+
const prereqItems = this.filteredItems.filter(i => i.isPrerequisite === true);
|
|
15243
|
+
const groups = new Map();
|
|
15244
|
+
prereqItems.forEach(item => {
|
|
15245
|
+
const name = (item.groupName || 'Prerequisite').toString();
|
|
15246
|
+
const existing = groups.get(name);
|
|
15247
|
+
if (existing)
|
|
15248
|
+
existing.push(item);
|
|
15249
|
+
else
|
|
15250
|
+
groups.set(name, [item]);
|
|
15150
15251
|
});
|
|
15252
|
+
this.prerequisiteGroups = Array.from(groups.entries()).map(([name, items]) => ({ name, items }));
|
|
15253
|
+
this.filteredStepItems = this.filteredItems.filter(i => i.isPrerequisite !== true);
|
|
15254
|
+
}
|
|
15255
|
+
stripHtml(html) {
|
|
15256
|
+
if (!html)
|
|
15257
|
+
return '';
|
|
15258
|
+
const div = document.createElement('div');
|
|
15259
|
+
div.innerHTML = html;
|
|
15260
|
+
return (div.textContent || div.innerText || '').trim();
|
|
15261
|
+
}
|
|
15262
|
+
isGroupExpanded(name) {
|
|
15263
|
+
return this.expandedGroupNames.has(name);
|
|
15264
|
+
}
|
|
15265
|
+
toggleGroup(name) {
|
|
15266
|
+
if (this.expandedGroupNames.has(name)) {
|
|
15267
|
+
this.expandedGroupNames.delete(name);
|
|
15268
|
+
}
|
|
15269
|
+
else {
|
|
15270
|
+
this.expandedGroupNames.add(name);
|
|
15271
|
+
}
|
|
15272
|
+
this.cdr.markForCheck();
|
|
15151
15273
|
}
|
|
15152
15274
|
onSearchValueChange(value) {
|
|
15153
15275
|
this.searchValue = value;
|
|
@@ -15200,17 +15322,21 @@ class JumpToStepModalComponent {
|
|
|
15200
15322
|
return item.id;
|
|
15201
15323
|
}
|
|
15202
15324
|
}
|
|
15203
|
-
JumpToStepModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15204
|
-
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 <
|
|
15325
|
+
JumpToStepModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
15326
|
+
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"] }] });
|
|
15205
15327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: JumpToStepModalComponent, decorators: [{
|
|
15206
15328
|
type: Component,
|
|
15207
|
-
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 <
|
|
15208
|
-
}], propDecorators: { isOpen: [{
|
|
15329
|
+
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: [] }]
|
|
15330
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
|
|
15209
15331
|
type: Input
|
|
15210
15332
|
}], title: [{
|
|
15211
15333
|
type: Input
|
|
15212
15334
|
}], items: [{
|
|
15213
15335
|
type: Input
|
|
15336
|
+
}], combinedTestCases: [{
|
|
15337
|
+
type: Input
|
|
15338
|
+
}], stepsMeta: [{
|
|
15339
|
+
type: Input
|
|
15214
15340
|
}], searchPlaceholder: [{
|
|
15215
15341
|
type: Input
|
|
15216
15342
|
}], searchEmptyStateLabel: [{
|
|
@@ -15219,6 +15345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
15219
15345
|
type: Input
|
|
15220
15346
|
}], enableSearch: [{
|
|
15221
15347
|
type: Input
|
|
15348
|
+
}], showPrerequisites: [{
|
|
15349
|
+
type: Input
|
|
15222
15350
|
}], onClose: [{
|
|
15223
15351
|
type: Output
|
|
15224
15352
|
}], onSearch: [{
|