@cqa-lib/cqa-ui 1.1.498 → 1.1.499

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.
Files changed (61) hide show
  1. package/esm2020/lib/button/button.component.mjs +38 -18
  2. package/esm2020/lib/change-history/change-history.component.mjs +1 -1
  3. package/esm2020/lib/column-visibility/column-visibility.component.mjs +1 -1
  4. package/esm2020/lib/compare-runs/compare-runs.component.mjs +228 -35
  5. package/esm2020/lib/compare-runs/view-compare-button.component.mjs +36 -0
  6. package/esm2020/lib/dashboards/coverage-module-card/coverage-module-card.component.mjs +1 -1
  7. package/esm2020/lib/dashboards/dashboard-header/dashboard-header.component.mjs +1 -1
  8. package/esm2020/lib/dashboards/insight-card/insight-card.component.mjs +1 -1
  9. package/esm2020/lib/dialog/dialog.component.mjs +1 -1
  10. package/esm2020/lib/empty-state/empty-state.component.mjs +1 -1
  11. package/esm2020/lib/error-modal/error-modal.component.mjs +1 -1
  12. package/esm2020/lib/execution-result-modal/execution-result-modal.component.mjs +1 -1
  13. package/esm2020/lib/execution-screen/breakpoints-modal/breakpoints-modal.component.mjs +1 -1
  14. package/esm2020/lib/execution-screen/condition-debug-step/condition-branch-editor.component.mjs +1 -1
  15. package/esm2020/lib/execution-screen/main-step-collapse/main-step-collapse.component.mjs +1 -1
  16. package/esm2020/lib/execution-screen/recording-banner/recording-banner.component.mjs +1 -1
  17. package/esm2020/lib/execution-screen/review-recorded-steps-modal/review-recorded-steps-modal.component.mjs +1 -1
  18. package/esm2020/lib/execution-screen/session-changes-modal/session-changes-modal.component.mjs +1 -1
  19. package/esm2020/lib/export-code-modal/export-code-modal.component.mjs +1 -1
  20. package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs +1 -1
  21. package/esm2020/lib/session-restoration-dialog/session-restoration-dialog.component.mjs +1 -1
  22. package/esm2020/lib/step-builder/step-builder-action/step-builder-action.component.mjs +1 -1
  23. package/esm2020/lib/step-builder/step-builder-ai-agent/step-builder-ai-agent.component.mjs +1 -1
  24. package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs +1 -1
  25. package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +1 -1
  26. package/esm2020/lib/step-builder/step-builder-database/step-builder-database.component.mjs +1 -1
  27. package/esm2020/lib/step-builder/step-builder-document/step-builder-document.component.mjs +1 -1
  28. package/esm2020/lib/step-builder/step-builder-document-generation-template-step/step-builder-document-generation-template-step.component.mjs +1 -1
  29. package/esm2020/lib/step-builder/step-builder-group/step-builder-group.component.mjs +1 -1
  30. package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +1 -1
  31. package/esm2020/lib/step-builder/step-builder-record-step/step-builder-record-step.component.mjs +1 -1
  32. package/esm2020/lib/sub-steps-confirmation-dialog/sub-steps-confirmation-dialog.component.mjs +1 -1
  33. package/esm2020/lib/templates/table-template.component.mjs +1 -1
  34. package/esm2020/lib/test-case-details/api-edit-step/api-edit-step.component.mjs +1 -1
  35. package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs +1 -1
  36. package/esm2020/lib/test-case-details/create-step-group/create-step-group.component.mjs +1 -1
  37. package/esm2020/lib/test-case-details/custom-edit-step/custom-edit-step.component.mjs +1 -1
  38. package/esm2020/lib/test-case-details/delete-steps/delete-steps.component.mjs +1 -1
  39. package/esm2020/lib/test-case-details/element-popup/element-form/element-form.component.mjs +1 -1
  40. package/esm2020/lib/test-case-details/element-popup/element-popup.component.mjs +1 -1
  41. package/esm2020/lib/test-case-details/loop-step/loop-step.component.mjs +1 -1
  42. package/esm2020/lib/test-case-details/run-execution-alert/run-execution-alert.component.mjs +1 -1
  43. package/esm2020/lib/test-case-details/step-details-drawer/step-details-drawer.component.mjs +1 -1
  44. package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +1 -1
  45. package/esm2020/lib/test-case-details/test-data-modal/test-data-modal.component.mjs +1 -1
  46. package/esm2020/lib/ui-kit.module.mjs +6 -1
  47. package/esm2020/lib/version-history/new-version-history-detail/new-version-history-detail.component.mjs +1 -1
  48. package/esm2020/lib/version-history/version-history-compare/version-history-compare.component.mjs +1 -1
  49. package/esm2020/lib/version-history/version-history-detail/version-history-detail.component.mjs +1 -1
  50. package/esm2020/public-api.mjs +2 -1
  51. package/fesm2015/cqa-lib-cqa-ui.mjs +352 -101
  52. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  53. package/fesm2020/cqa-lib-cqa-ui.mjs +350 -101
  54. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  55. package/lib/button/button.component.d.ts +5 -1
  56. package/lib/compare-runs/compare-runs.component.d.ts +32 -2
  57. package/lib/compare-runs/view-compare-button.component.d.ts +7 -0
  58. package/lib/ui-kit.module.d.ts +102 -101
  59. package/package.json +1 -1
  60. package/public-api.d.ts +1 -0
  61. package/styles.css +1 -1
package/esm2020/lib/error-modal/error-modal.component.mjs CHANGED
@@ -54,7 +54,7 @@ export class ErrorModalComponent {
54
54
  }
55
55
  }
56
56
  ErrorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
57
- ErrorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ErrorModalComponent, selector: "cqa-error-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", instructionalMessage: "instructionalMessage", errorMessage: "errorMessage", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", buttons: "buttons", showLoading: "showLoading", loadingBadgeInlineStyles: "loadingBadgeInlineStyles", loadingBadgeLabel: "loadingBadgeLabel" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal" }, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] 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-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'error'\">\n <svg width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F15F5F\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M32.3815 62.4437H60.619C63.5065 62.4437 65.3065 59.3125 63.8627 56.8188L49.744 32.425C48.3002 29.9313 44.7002 29.9313 43.2565 32.425L29.1377 56.8188C27.694 59.3125 29.494 62.4437 32.3815 62.4437ZM46.5002 49.3188C45.469 49.3188 44.6252 48.475 44.6252 47.4438V43.6938C44.6252 42.6625 45.469 41.8188 46.5002 41.8188C47.5315 41.8188 48.3752 42.6625 48.3752 43.6938V47.4438C48.3752 48.475 47.5315 49.3188 46.5002 49.3188ZM48.3752 56.8188H44.6252V53.0688H48.3752V56.8188Z\" fill=\"white\"/>\n </svg>\n </div>\n <div *ngIf=\"status === 'success'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n\n <!-- Instructional Message -->\n <p *ngIf=\"instructionalMessage\" class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mt-2 cqa-text-center\">\n {{ instructionalMessage }}\n </p>\n </div>\n\n <!-- <div *ngIf=\"hasTimingData\" class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\" [ngClass]=\"stepsBackgroundClass\"\n style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div\n class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div> -->\n\n <!-- Error Message Section -->\n <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-4 cqa-rounded-lg cqa-bg-white\"\n style=\"border: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-xs cqa-text-[#9CA3AF] cqa-mb-2 cqa-font-medium\">\n {{ status === 'success' ? 'Details' : 'Error Message' }}\n </div>\n <div class=\"cqa-text-sm cqa-text-[#111827] cqa-font-semibold cqa-whitespace-normal cqa-break-anywhere\"\n style=\"word-break: break-word; white-space: pre-line;\">\n {{ errorMessage }}\n </div>\n </div>\n\n\n <!-- Buttons (or loading badge when showLoading) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <cqa-badge\n *ngIf=\"showLoading\"\n [label]=\"loadingBadgeLabel\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\"\n [inlineStyles]=\"loadingBadgeInlineStyles\">\n </cqa-badge>\n <ng-container *ngIf=\"!showLoading\">\n <cqa-button\n *ngFor=\"let button of buttons; let i = index\"\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n [disabled]=\"button.disabled ?? false\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n</div>", components: [{ type: i1.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: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
57
+ ErrorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ErrorModalComponent, selector: "cqa-error-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", instructionalMessage: "instructionalMessage", errorMessage: "errorMessage", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", buttons: "buttons", showLoading: "showLoading", loadingBadgeInlineStyles: "loadingBadgeInlineStyles", loadingBadgeLabel: "loadingBadgeLabel" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal" }, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] 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-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'error'\">\n <svg width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F15F5F\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M32.3815 62.4437H60.619C63.5065 62.4437 65.3065 59.3125 63.8627 56.8188L49.744 32.425C48.3002 29.9313 44.7002 29.9313 43.2565 32.425L29.1377 56.8188C27.694 59.3125 29.494 62.4437 32.3815 62.4437ZM46.5002 49.3188C45.469 49.3188 44.6252 48.475 44.6252 47.4438V43.6938C44.6252 42.6625 45.469 41.8188 46.5002 41.8188C47.5315 41.8188 48.3752 42.6625 48.3752 43.6938V47.4438C48.3752 48.475 47.5315 49.3188 46.5002 49.3188ZM48.3752 56.8188H44.6252V53.0688H48.3752V56.8188Z\" fill=\"white\"/>\n </svg>\n </div>\n <div *ngIf=\"status === 'success'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n\n <!-- Instructional Message -->\n <p *ngIf=\"instructionalMessage\" class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mt-2 cqa-text-center\">\n {{ instructionalMessage }}\n </p>\n </div>\n\n <!-- <div *ngIf=\"hasTimingData\" class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\" [ngClass]=\"stepsBackgroundClass\"\n style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div\n class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div> -->\n\n <!-- Error Message Section -->\n <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-4 cqa-rounded-lg cqa-bg-white\"\n style=\"border: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-xs cqa-text-[#9CA3AF] cqa-mb-2 cqa-font-medium\">\n {{ status === 'success' ? 'Details' : 'Error Message' }}\n </div>\n <div class=\"cqa-text-sm cqa-text-[#111827] cqa-font-semibold cqa-whitespace-normal cqa-break-anywhere\"\n style=\"word-break: break-word; white-space: pre-line;\">\n {{ errorMessage }}\n </div>\n </div>\n\n\n <!-- Buttons (or loading badge when showLoading) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <cqa-badge\n *ngIf=\"showLoading\"\n [label]=\"loadingBadgeLabel\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\"\n [inlineStyles]=\"loadingBadgeInlineStyles\">\n </cqa-badge>\n <ng-container *ngIf=\"!showLoading\">\n <cqa-button\n *ngFor=\"let button of buttons; let i = index\"\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n [disabled]=\"button.disabled ?? false\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n</div>", components: [{ type: i1.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: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
58
58
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, decorators: [{
59
59
  type: Component,
60
60
  args: [{ selector: 'cqa-error-modal', template: "<div *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] 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-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'error'\">\n <svg width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F15F5F\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M32.3815 62.4437H60.619C63.5065 62.4437 65.3065 59.3125 63.8627 56.8188L49.744 32.425C48.3002 29.9313 44.7002 29.9313 43.2565 32.425L29.1377 56.8188C27.694 59.3125 29.494 62.4437 32.3815 62.4437ZM46.5002 49.3188C45.469 49.3188 44.6252 48.475 44.6252 47.4438V43.6938C44.6252 42.6625 45.469 41.8188 46.5002 41.8188C47.5315 41.8188 48.3752 42.6625 48.3752 43.6938V47.4438C48.3752 48.475 47.5315 49.3188 46.5002 49.3188ZM48.3752 56.8188H44.6252V53.0688H48.3752V56.8188Z\" fill=\"white\"/>\n </svg>\n </div>\n <div *ngIf=\"status === 'success'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n\n <!-- Instructional Message -->\n <p *ngIf=\"instructionalMessage\" class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mt-2 cqa-text-center\">\n {{ instructionalMessage }}\n </p>\n </div>\n\n <!-- <div *ngIf=\"hasTimingData\" class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\" [ngClass]=\"stepsBackgroundClass\"\n style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div\n class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div> -->\n\n <!-- Error Message Section -->\n <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-4 cqa-rounded-lg cqa-bg-white\"\n style=\"border: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-xs cqa-text-[#9CA3AF] cqa-mb-2 cqa-font-medium\">\n {{ status === 'success' ? 'Details' : 'Error Message' }}\n </div>\n <div class=\"cqa-text-sm cqa-text-[#111827] cqa-font-semibold cqa-whitespace-normal cqa-break-anywhere\"\n style=\"word-break: break-word; white-space: pre-line;\">\n {{ errorMessage }}\n </div>\n </div>\n\n\n <!-- Buttons (or loading badge when showLoading) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <cqa-badge\n *ngIf=\"showLoading\"\n [label]=\"loadingBadgeLabel\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\"\n [inlineStyles]=\"loadingBadgeInlineStyles\">\n </cqa-badge>\n <ng-container *ngIf=\"!showLoading\">\n <cqa-button\n *ngFor=\"let button of buttons; let i = index\"\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n [disabled]=\"button.disabled ?? false\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n</div>", styles: [] }]
package/esm2020/lib/execution-result-modal/execution-result-modal.component.mjs CHANGED
@@ -74,7 +74,7 @@ export class ExecutionResultModalComponent {
74
74
  }
75
75
  }
76
76
  ExecutionResultModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
77
- ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps", skippedSteps: "skippedSteps", showSessionChangesButton: "showSessionChangesButton", joinedInProgressMessage: "joinedInProgressMessage" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal", sessionChangesClick: "sessionChangesClick" }, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] 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-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime && !shouldShowJoinedInProgressMessage\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime && !shouldShowJoinedInProgressMessage\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <!--\n Tool Time is hidden until BE provides real values (CON-909).\n Tracking ticket: https://linear.app/contextqa/issue/CON-909\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n -->\n </div>\n </div>\n\n <div *ngIf=\"shouldShowJoinedInProgressMessage\"\n class=\"cqa-rounded-[10px] cqa-p-[17px] cqa-my-2 cqa-text-[12px] cqa-text-[#364153] cqa-leading-[18px]\"\n style=\"border: 1px solid #C7D2FE; background-color: #EEF2FF;\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink: 0; margin-top: 1px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#6366F1\" stroke-width=\"2\"/>\n <path d=\"M12 8h.01M11 12h1v4h1\" stroke=\"#6366F1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ joinedInProgressMessage }}</span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowSkippedSteps\"\n class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngFor=\"let skipped of skippedSteps\"\n class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n style=\"word-break: break-word;\">\n Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let last = last\">\n <cqa-button\n *ngIf=\"showSessionChangesButton && last\"\n variant=\"outlined\"\n text=\"Review Session Changes\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n (clicked)=\"onSessionChangesClick()\">\n </cqa-button>\n <cqa-button\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n </div>\n\n", components: [{ type: i1.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
77
+ ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps", skippedSteps: "skippedSteps", showSessionChangesButton: "showSessionChangesButton", joinedInProgressMessage: "joinedInProgressMessage" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal", sessionChangesClick: "sessionChangesClick" }, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] 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-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime && !shouldShowJoinedInProgressMessage\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime && !shouldShowJoinedInProgressMessage\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <!--\n Tool Time is hidden until BE provides real values (CON-909).\n Tracking ticket: https://linear.app/contextqa/issue/CON-909\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n -->\n </div>\n </div>\n\n <div *ngIf=\"shouldShowJoinedInProgressMessage\"\n class=\"cqa-rounded-[10px] cqa-p-[17px] cqa-my-2 cqa-text-[12px] cqa-text-[#364153] cqa-leading-[18px]\"\n style=\"border: 1px solid #C7D2FE; background-color: #EEF2FF;\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink: 0; margin-top: 1px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#6366F1\" stroke-width=\"2\"/>\n <path d=\"M12 8h.01M11 12h1v4h1\" stroke=\"#6366F1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ joinedInProgressMessage }}</span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowSkippedSteps\"\n class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngFor=\"let skipped of skippedSteps\"\n class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n style=\"word-break: break-word;\">\n Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let last = last\">\n <cqa-button\n *ngIf=\"showSessionChangesButton && last\"\n variant=\"outlined\"\n text=\"Review Session Changes\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n (clicked)=\"onSessionChangesClick()\">\n </cqa-button>\n <cqa-button\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n </div>\n\n", components: [{ type: i1.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
78
78
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, decorators: [{
79
79
  type: Component,
80
80
  args: [{ selector: 'cqa-execution-result-modal', template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] 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-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime && !shouldShowJoinedInProgressMessage\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime && !shouldShowJoinedInProgressMessage\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <!--\n Tool Time is hidden until BE provides real values (CON-909).\n Tracking ticket: https://linear.app/contextqa/issue/CON-909\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n -->\n </div>\n </div>\n\n <div *ngIf=\"shouldShowJoinedInProgressMessage\"\n class=\"cqa-rounded-[10px] cqa-p-[17px] cqa-my-2 cqa-text-[12px] cqa-text-[#364153] cqa-leading-[18px]\"\n style=\"border: 1px solid #C7D2FE; background-color: #EEF2FF;\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink: 0; margin-top: 1px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#6366F1\" stroke-width=\"2\"/>\n <path d=\"M12 8h.01M11 12h1v4h1\" stroke=\"#6366F1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ joinedInProgressMessage }}</span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowSkippedSteps\"\n class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngFor=\"let skipped of skippedSteps\"\n class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n style=\"word-break: break-word;\">\n Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let last = last\">\n <cqa-button\n *ngIf=\"showSessionChangesButton && last\"\n variant=\"outlined\"\n text=\"Review Session Changes\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n (clicked)=\"onSessionChangesClick()\">\n </cqa-button>\n <cqa-button\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n </div>\n\n", styles: [] }]
package/esm2020/lib/execution-screen/breakpoints-modal/breakpoints-modal.component.mjs CHANGED
@@ -64,7 +64,7 @@ export class BreakpointsModalComponent {
64
64
  }
65
65
  }
66
66
  BreakpointsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreakpointsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
67
- BreakpointsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BreakpointsModalComponent, selector: "cqa-breakpoints-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", buttonLabel: "buttonLabel", emptyStateLabel: "emptyStateLabel" }, outputs: { onClose: "onClose", onRemove: "onRemove", onRemoveAll: "onRemoveAll" }, 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-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] 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-px-6 cqa-pt-6 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base 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 cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\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 <!-- Summary text -->\n <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n {{ summaryText }}\n </p>\n </div>\n\n <!-- Divider -->\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 <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n {{ emptyStateLabel || 'No Data Found.' }}\n </p>\n </div>\n\n <!-- Breakpoints List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n <!-- Red Breakpoint Dot -->\n <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n <!-- Text Content -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n {{ item.primaryLabel }}\n </span>\n <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n {{ item.secondaryLabel }}\n </span>\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <cqa-button\n type=\"button\"\n variant=\"text\"\n [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove breakpoint'\"\n (clicked)=\"removeItem(item)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer: Remove All Button -->\n <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n \n <cqa-button\n [fullWidth]=\"true\"\n (click)=\"removeAll()\"\n [label]=\"buttonLabel\"\n variant=\"outlined\"\n color=\"black\"\n [text]=\"buttonLabel\"\n >\n </cqa-button>\n <!-- <button\n type=\"button\"\n class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n (click)=\"removeAll()\">\n {{ buttonLabel }}\n </button> -->\n </div>\n </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
67
+ BreakpointsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BreakpointsModalComponent, selector: "cqa-breakpoints-modal", inputs: { isOpen: "isOpen", title: "title", items: "items", buttonLabel: "buttonLabel", emptyStateLabel: "emptyStateLabel" }, outputs: { onClose: "onClose", onRemove: "onRemove", onRemoveAll: "onRemoveAll" }, 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-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] 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-px-6 cqa-pt-6 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base 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 cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\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 <!-- Summary text -->\n <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n {{ summaryText }}\n </p>\n </div>\n\n <!-- Divider -->\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 <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n {{ emptyStateLabel || 'No Data Found.' }}\n </p>\n </div>\n\n <!-- Breakpoints List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n <!-- Red Breakpoint Dot -->\n <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n <!-- Text Content -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n {{ item.primaryLabel }}\n </span>\n <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n {{ item.secondaryLabel }}\n </span>\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <cqa-button\n type=\"button\"\n variant=\"text\"\n [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove breakpoint'\"\n (clicked)=\"removeItem(item)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer: Remove All Button -->\n <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n \n <cqa-button\n [fullWidth]=\"true\"\n (click)=\"removeAll()\"\n [label]=\"buttonLabel\"\n variant=\"outlined\"\n color=\"black\"\n [text]=\"buttonLabel\"\n >\n </cqa-button>\n <!-- <button\n type=\"button\"\n class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n (click)=\"removeAll()\">\n {{ buttonLabel }}\n </button> -->\n </div>\n </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
68
68
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreakpointsModalComponent, decorators: [{
69
69
  type: Component,
70
70
  args: [{ selector: 'cqa-breakpoints-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-xl cqa-bg-white cqa-shadow-lg cqa-w-full cqa-max-w-[420px] 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-px-6 cqa-pt-6 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C] cqa-text-base 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 cqa-rounded cqa--mt-[2px] cqa--mr-[2px]\"\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 <!-- Summary text -->\n <p *ngIf=\"hasItems\" class=\"cqa-text-sm cqa-font-normal cqa-text-[#666666] cqa-text-sm cqa-leading-[1.4] cqa-font-inter cqa-m-0 cqa-mt-1\">\n {{ summaryText }}\n </p>\n </div>\n\n <!-- Divider -->\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 <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-px-6 cqa-pt-4 cqa-pb-2\" style=\"scrollbar-width: thin; max-height: 50vh;\">\n <!-- Empty State -->\n <div *ngIf=\"!hasItems\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-text-center\">\n <p class=\"cqa-text-sm cqa-text-[#666666] cqa-font-inter cqa-m-0\">\n {{ emptyStateLabel || 'No Data Found.' }}\n </p>\n </div>\n\n <!-- Breakpoints List -->\n <div *ngIf=\"hasItems\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let item of displayItems; trackBy: trackByItemId\"\n class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#e5e7eb2e] cqa-rounded-lg cqa-min-w-0 cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n\n <!-- Red Breakpoint Dot -->\n <span class=\"cqa-flex-shrink-0 cqa-w-[10px] cqa-h-[10px] cqa-mt-[5px] cqa-rounded-full cqa-bg-[#DC2626]\" aria-hidden=\"true\"></span>\n\n <!-- Text Content -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[2px] cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#6B7280] cqa-leading-[1.3] cqa-font-inter\">\n {{ item.primaryLabel }}\n </span>\n <span class=\"cqa-text-sm cqa-font-normal cqa-text-[#111827] cqa-leading-[1.4] cqa-font-inter cqa-break-words\">\n {{ item.secondaryLabel }}\n </span>\n </div>\n <div (click)=\"$event.stopPropagation()\">\n <cqa-button\n type=\"button\"\n variant=\"text\"\n [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove breakpoint'\"\n (clicked)=\"removeItem(item)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\" fill=\"#99999E\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer: Remove All Button -->\n <div *ngIf=\"hasItems\" class=\"cqa-px-6 cqa-pb-6 cqa-pt-4\">\n \n <cqa-button\n [fullWidth]=\"true\"\n (click)=\"removeAll()\"\n [label]=\"buttonLabel\"\n variant=\"outlined\"\n color=\"black\"\n [text]=\"buttonLabel\"\n >\n </cqa-button>\n <!-- <button\n type=\"button\"\n class=\"cqa-w-full cqa-py-[10px] cqa-px-5 cqa-text-sm cqa-font-medium cqa-text-[#212121] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#D9D9D9] cqa-rounded-lg cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#9CA3AF] cqa-font-inter\"\n (click)=\"removeAll()\">\n {{ buttonLabel }}\n </button> -->\n </div>\n </div>\n</div>\n\n", styles: [] }]
package/esm2020/lib/execution-screen/condition-debug-step/condition-branch-editor.component.mjs CHANGED
@@ -338,7 +338,7 @@ export class ConditionBranchEditorComponent {
338
338
  }
339
339
  }
340
340
  ConditionBranchEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
341
- 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: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i6.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i7.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
341
+ 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: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i6.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i7.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
342
342
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, decorators: [{
343
343
  type: Component,
344
344
  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: [] }]
package/esm2020/lib/execution-screen/main-step-collapse/main-step-collapse.component.mjs CHANGED
@@ -147,7 +147,7 @@ export class MainStepCollapseComponent {
147
147
  }
148
148
  }
149
149
  MainStepCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
150
- MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", countLoading: "countLoading", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab", expandOnViewSteps: "expandOnViewSteps", initialExpandedItemId: "initialExpandedItemId", isDebug: "isDebug", hideDuration: "hideDuration", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions" }, outputs: { viewSteps: "viewSteps", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid cqa-w-full\"\n (click)=\"toggle()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <!-- Chevron Icon (Left) -->\n <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> -->\n <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- Chain-Link Icon (if configured, otherwise default) -->\n <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div *ngIf=\"icon && icon.type === 'loop'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div> -->\n <!-- Bar Icon (Bulleted List) -->\n <div *ngIf=\"icon && icon.type === 'bar'\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- First bullet and line -->\n <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Second bullet and line -->\n <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Third bullet and line -->\n <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Custom Icon -->\n <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n <!-- Title -->\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ title }}\n </span>\n\n <!-- Badge and dynamic header buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n <cqa-button\n [text]=\"btn.text\"\n [icon]=\"btn.icon\"\n [variant]=\"btn.variant || 'outlined'\"\n [disabled]=\"btn.disabled\"\n [tooltip]=\"btn.tooltip\"\n [customClass]=\"btn.customClass\"\n [btnSize]=\"btn.btnSize || 'sm'\"\n (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n </cqa-button>\n </ng-container>\n <span\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7] cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[24px]\">\n <mat-spinner *ngIf=\"countLoading\" diameter=\"16\" class=\"cqa-inline-block\"></mat-spinner>\n <span *ngIf=\"!countLoading\">{{ getDisplayCount() }}</span>\n </span>\n </div>\n </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <!-- When there are no items, display ng-content directly -->\n <ng-container *ngIf=\"!items || items.length === 0\">\n <ng-content></ng-content>\n </ng-container>\n\n <!-- When items exist, display them -->\n <div *ngFor=\"let item of items\">\n\n <!-- Item Header -->\n <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <!-- Left side: Status and Title -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <!-- Status Icon (Filled Green Circle with Checkmark) -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_48_121)\">\n <path\n d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_48_121\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <!-- Failed -->\n <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <!-- Pending -->\n <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <!-- Running -->\n <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n \n <!-- Title -->\n <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ item.title }}\n </span>\n </div>\n \n <!-- Right side: Duration and View Steps Link -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Step action icons (only when isDebug) -->\n <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n <button 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(item, $event)\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n </button>\n <button 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(item, opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n <button *ngIf=\"stepMoreMenuOptions.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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n </div>\n <!-- Duration with Clock Icon (hidden when hideDuration is true, e.g. prerequisites in test case details) -->\n <div *ngIf=\"!hideDuration\" class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n \n <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n [href]=\"getItemViewStepsUrl(item)\"\n [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>View steps</span>\n <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Steps Content (shown when item is expanded) -->\n <div *ngIf=\"isItemExpanded(item.id)\">\n <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n <div class=\"cqa-p-3\">\n <ng-container\n *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Custom content projection via ng-content - displayed for all expanded items -->\n <ng-content select=\"[itemContent]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: i1.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
150
+ MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", countLoading: "countLoading", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab", expandOnViewSteps: "expandOnViewSteps", initialExpandedItemId: "initialExpandedItemId", isDebug: "isDebug", hideDuration: "hideDuration", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions" }, outputs: { viewSteps: "viewSteps", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid cqa-w-full\"\n (click)=\"toggle()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <!-- Chevron Icon (Left) -->\n <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> -->\n <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- Chain-Link Icon (if configured, otherwise default) -->\n <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div *ngIf=\"icon && icon.type === 'loop'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div> -->\n <!-- Bar Icon (Bulleted List) -->\n <div *ngIf=\"icon && icon.type === 'bar'\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- First bullet and line -->\n <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Second bullet and line -->\n <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Third bullet and line -->\n <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Custom Icon -->\n <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n <!-- Title -->\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ title }}\n </span>\n\n <!-- Badge and dynamic header buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n <cqa-button\n [text]=\"btn.text\"\n [icon]=\"btn.icon\"\n [variant]=\"btn.variant || 'outlined'\"\n [disabled]=\"btn.disabled\"\n [tooltip]=\"btn.tooltip\"\n [customClass]=\"btn.customClass\"\n [btnSize]=\"btn.btnSize || 'sm'\"\n (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n </cqa-button>\n </ng-container>\n <span\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7] cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[24px]\">\n <mat-spinner *ngIf=\"countLoading\" diameter=\"16\" class=\"cqa-inline-block\"></mat-spinner>\n <span *ngIf=\"!countLoading\">{{ getDisplayCount() }}</span>\n </span>\n </div>\n </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <!-- When there are no items, display ng-content directly -->\n <ng-container *ngIf=\"!items || items.length === 0\">\n <ng-content></ng-content>\n </ng-container>\n\n <!-- When items exist, display them -->\n <div *ngFor=\"let item of items\">\n\n <!-- Item Header -->\n <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <!-- Left side: Status and Title -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <!-- Status Icon (Filled Green Circle with Checkmark) -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_48_121)\">\n <path\n d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_48_121\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <!-- Failed -->\n <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <!-- Pending -->\n <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <!-- Running -->\n <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n \n <!-- Title -->\n <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ item.title }}\n </span>\n </div>\n \n <!-- Right side: Duration and View Steps Link -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Step action icons (only when isDebug) -->\n <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n <button 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(item, $event)\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n </button>\n <button 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(item, opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n <button *ngIf=\"stepMoreMenuOptions.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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n </div>\n <!-- Duration with Clock Icon (hidden when hideDuration is true, e.g. prerequisites in test case details) -->\n <div *ngIf=\"!hideDuration\" class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n \n <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n [href]=\"getItemViewStepsUrl(item)\"\n [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>View steps</span>\n <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Steps Content (shown when item is expanded) -->\n <div *ngIf=\"isItemExpanded(item.id)\">\n <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n <div class=\"cqa-p-3\">\n <ng-container\n *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Custom content projection via ng-content - displayed for all expanded items -->\n <ng-content select=\"[itemContent]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: i1.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
151
151
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, decorators: [{
152
152
  type: Component,
153
153
  args: [{ selector: 'cqa-main-step-collapse', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<!-- Header -->\n<div\n class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid cqa-w-full\"\n (click)=\"toggle()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n <!-- Chevron Icon (Left) -->\n <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> -->\n <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- Chain-Link Icon (if configured, otherwise default) -->\n <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div *ngIf=\"icon && icon.type === 'loop'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div> -->\n <!-- Bar Icon (Bulleted List) -->\n <div *ngIf=\"icon && icon.type === 'bar'\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- First bullet and line -->\n <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Second bullet and line -->\n <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Third bullet and line -->\n <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </div>\n\n <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Custom Icon -->\n <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n <!-- Title -->\n <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n {{ title }}\n </span>\n\n <!-- Badge and dynamic header buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n <cqa-button\n [text]=\"btn.text\"\n [icon]=\"btn.icon\"\n [variant]=\"btn.variant || 'outlined'\"\n [disabled]=\"btn.disabled\"\n [tooltip]=\"btn.tooltip\"\n [customClass]=\"btn.customClass\"\n [btnSize]=\"btn.btnSize || 'sm'\"\n (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n </cqa-button>\n </ng-container>\n <span\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7] cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[24px]\">\n <mat-spinner *ngIf=\"countLoading\" diameter=\"16\" class=\"cqa-inline-block\"></mat-spinner>\n <span *ngIf=\"!countLoading\">{{ getDisplayCount() }}</span>\n </span>\n </div>\n </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n <!-- When there are no items, display ng-content directly -->\n <ng-container *ngIf=\"!items || items.length === 0\">\n <ng-content></ng-content>\n </ng-container>\n\n <!-- When items exist, display them -->\n <div *ngFor=\"let item of items\">\n\n <!-- Item Header -->\n <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <!-- Left side: Status and Title -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n <!-- Status Icon (Filled Green Circle with Checkmark) -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_48_121)\">\n <path\n d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_48_121\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <!-- Failed -->\n <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <!-- Pending -->\n <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <!-- Running -->\n <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n \n <!-- Title -->\n <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ item.title }}\n </span>\n </div>\n \n <!-- Right side: Duration and View Steps Link -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Step action icons (only when isDebug) -->\n <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n <button 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(item, $event)\">\n <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n </button>\n <button 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(item, opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n <button *ngIf=\"stepMoreMenuOptions.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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n </mat-menu>\n </div>\n <!-- Duration with Clock Icon (hidden when hideDuration is true, e.g. prerequisites in test case details) -->\n <div *ngIf=\"!hideDuration\" class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n \n <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n [href]=\"getItemViewStepsUrl(item)\"\n [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>View steps</span>\n <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Steps Content (shown when item is expanded) -->\n <div *ngIf=\"isItemExpanded(item.id)\">\n <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n <div class=\"cqa-p-3\">\n <ng-container\n *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Custom content projection via ng-content - displayed for all expanded items -->\n <ng-content select=\"[itemContent]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", styles: [] }]
package/esm2020/lib/execution-screen/recording-banner/recording-banner.component.mjs CHANGED
@@ -16,7 +16,7 @@ export class RecordingBannerComponent {
16
16
  }
17
17
  }
18
18
  RecordingBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RecordingBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
19
- RecordingBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RecordingBannerComponent, selector: "cqa-recording-banner", inputs: { isVisible: "isVisible", stepsCaptured: "stepsCaptured" }, outputs: { stopRecording: "stopRecording" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n class=\"cqa-fixed cqa-left-1/2 cqa-top-6 cqa-z-[60] cqa-flex cqa-items-center cqa-justify-center cqa--translate-x-1/2\"\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Recording in progress\"\n>\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-6 cqa-px-6 cqa-py-3 cqa-bg-red-500 cqa-rounded-full cqa-shadow-md cqa-text-white\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-shrink-0\">\n <span class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-bg-white cqa-border cqa-border-white cqa-opacity-100 cqa-flex-shrink-0\" aria-hidden=\"true\"></span>\n <span class=\"cqa-font-[Inter] cqa-font-normal cqa-text-[14px] cqa-leading-[18px] cqa-tracking-normal cqa-text-white cqa-align-middle cqa-whitespace-nowrap\">Recording</span>\n <span class=\"cqa-font-[Inter] cqa-font-normal cqa-text-[14px] cqa-text-[#FFFFFF] cqa-leading-[18px] cqa-tracking-normal cqa-text-white cqa-align-middle cqa-whitespace-nowrap\">{{ stepsCaptured }} steps captured</span>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"'Stop'\"\n icon=\"crop_square\"\n iconColor=\"#FFFFFF\"\n customClass=\"!cqa-bg-[#F9FAFB33] !cqa-border-[#F9FAFB33] !cqa-text-white cqa-text-[14px] cqa-w-[77px] cqa-h-[28px] cqa-min-h-[28px] cqa-gap-[6px] cqa-pl-[12px] cqa-pr-[12px] cqa-rounded-[6px] cqa-flex-shrink-0\"\n (clicked)=\"onStop()\">\n </cqa-button>\n </div>\n</div>\n", components: [{ type: i1.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
19
+ RecordingBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RecordingBannerComponent, selector: "cqa-recording-banner", inputs: { isVisible: "isVisible", stepsCaptured: "stepsCaptured" }, outputs: { stopRecording: "stopRecording" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n class=\"cqa-fixed cqa-left-1/2 cqa-top-6 cqa-z-[60] cqa-flex cqa-items-center cqa-justify-center cqa--translate-x-1/2\"\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Recording in progress\"\n>\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-6 cqa-px-6 cqa-py-3 cqa-bg-red-500 cqa-rounded-full cqa-shadow-md cqa-text-white\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-shrink-0\">\n <span class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-bg-white cqa-border cqa-border-white cqa-opacity-100 cqa-flex-shrink-0\" aria-hidden=\"true\"></span>\n <span class=\"cqa-font-[Inter] cqa-font-normal cqa-text-[14px] cqa-leading-[18px] cqa-tracking-normal cqa-text-white cqa-align-middle cqa-whitespace-nowrap\">Recording</span>\n <span class=\"cqa-font-[Inter] cqa-font-normal cqa-text-[14px] cqa-text-[#FFFFFF] cqa-leading-[18px] cqa-tracking-normal cqa-text-white cqa-align-middle cqa-whitespace-nowrap\">{{ stepsCaptured }} steps captured</span>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"'Stop'\"\n icon=\"crop_square\"\n iconColor=\"#FFFFFF\"\n customClass=\"!cqa-bg-[#F9FAFB33] !cqa-border-[#F9FAFB33] !cqa-text-white cqa-text-[14px] cqa-w-[77px] cqa-h-[28px] cqa-min-h-[28px] cqa-gap-[6px] cqa-pl-[12px] cqa-pr-[12px] cqa-rounded-[6px] cqa-flex-shrink-0\"\n (clicked)=\"onStop()\">\n </cqa-button>\n </div>\n</div>\n", components: [{ type: i1.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"] }] });
20
20
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RecordingBannerComponent, decorators: [{
21
21
  type: Component,
22
22
  args: [{ selector: 'cqa-recording-banner', host: { class: 'cqa-ui-root' }, template: "<div\n *ngIf=\"isVisible\"\n class=\"cqa-fixed cqa-left-1/2 cqa-top-6 cqa-z-[60] cqa-flex cqa-items-center cqa-justify-center cqa--translate-x-1/2\"\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Recording in progress\"\n>\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-6 cqa-px-6 cqa-py-3 cqa-bg-red-500 cqa-rounded-full cqa-shadow-md cqa-text-white\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-shrink-0\">\n <span class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-bg-white cqa-border cqa-border-white cqa-opacity-100 cqa-flex-shrink-0\" aria-hidden=\"true\"></span>\n <span class=\"cqa-font-[Inter] cqa-font-normal cqa-text-[14px] cqa-leading-[18px] cqa-tracking-normal cqa-text-white cqa-align-middle cqa-whitespace-nowrap\">Recording</span>\n <span class=\"cqa-font-[Inter] cqa-font-normal cqa-text-[14px] cqa-text-[#FFFFFF] cqa-leading-[18px] cqa-tracking-normal cqa-text-white cqa-align-middle cqa-whitespace-nowrap\">{{ stepsCaptured }} steps captured</span>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"'Stop'\"\n icon=\"crop_square\"\n iconColor=\"#FFFFFF\"\n customClass=\"!cqa-bg-[#F9FAFB33] !cqa-border-[#F9FAFB33] !cqa-text-white cqa-text-[14px] cqa-w-[77px] cqa-h-[28px] cqa-min-h-[28px] cqa-gap-[6px] cqa-pl-[12px] cqa-pr-[12px] cqa-rounded-[6px] cqa-flex-shrink-0\"\n (clicked)=\"onStop()\">\n </cqa-button>\n </div>\n</div>\n", styles: [] }]