@cqa-lib/cqa-ui 1.1.418 → 1.1.420
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/execution-screen/session-changes-modal/session-changes-modal.component.mjs +15 -4
- package/esm2020/lib/table-action-toolbar/table-action-toolbar.component.mjs +14 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +27 -5
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +27 -5
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/session-changes-modal/session-changes-modal.component.d.ts +5 -1
- package/lib/table-action-toolbar/table-action-toolbar.component.d.ts +4 -0
- package/package.json +1 -1
|
@@ -3850,6 +3850,17 @@ class TableActionToolbarComponent {
|
|
|
3850
3850
|
const ctx = { selected: this.selectedItems || [] };
|
|
3851
3851
|
return action.disabled ? !!action.disabled(ctx) : false;
|
|
3852
3852
|
}
|
|
3853
|
+
/**
|
|
3854
|
+
* Keep first click actionable by preventing pointer down from being used only for focus transfer.
|
|
3855
|
+
*/
|
|
3856
|
+
onActionMouseDown(event, action) {
|
|
3857
|
+
if (this.isDisabled(action) || event.button !== 0) {
|
|
3858
|
+
return;
|
|
3859
|
+
}
|
|
3860
|
+
event.preventDefault();
|
|
3861
|
+
event.stopPropagation();
|
|
3862
|
+
this.onAction(action);
|
|
3863
|
+
}
|
|
3853
3864
|
onAction(action) {
|
|
3854
3865
|
if (this.isDisabled(action)) {
|
|
3855
3866
|
return;
|
|
@@ -3879,10 +3890,10 @@ class TableActionToolbarComponent {
|
|
|
3879
3890
|
}
|
|
3880
3891
|
TableActionToolbarComponent.ACTION_COOLDOWN_MS = 500;
|
|
3881
3892
|
TableActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3882
|
-
TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"
|
|
3893
|
+
TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"\n (mousedown)=\"onActionMouseDown($event, action)\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n </div>\n </ng-container>\n <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n title=\"Dismiss\" aria-label=\"Dismiss\">\n <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3883
3894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, decorators: [{
|
|
3884
3895
|
type: Component,
|
|
3885
|
-
args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"
|
|
3896
|
+
args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"\n (mousedown)=\"onActionMouseDown($event, action)\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n </div>\n </ng-container>\n <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n title=\"Dismiss\" aria-label=\"Dismiss\">\n <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3886
3897
|
}], propDecorators: { selectedItems: [{
|
|
3887
3898
|
type: Input
|
|
3888
3899
|
}], actions: [{
|
|
@@ -19744,6 +19755,7 @@ class SessionChangesModalComponent {
|
|
|
19744
19755
|
this.deletedSteps = [];
|
|
19745
19756
|
this.saveButtonLabel = 'Save to Test Case';
|
|
19746
19757
|
this.saveButtonDisabled = false;
|
|
19758
|
+
this.executionInProgress = false;
|
|
19747
19759
|
this.commitMessageTemplate = 'This will commit all {{count}} changes to the test case';
|
|
19748
19760
|
this.closeModal = new EventEmitter();
|
|
19749
19761
|
this.saveToTestCase = new EventEmitter();
|
|
@@ -19767,8 +19779,16 @@ class SessionChangesModalComponent {
|
|
|
19767
19779
|
onClose() {
|
|
19768
19780
|
this.closeModal.emit();
|
|
19769
19781
|
}
|
|
19782
|
+
get isSaveDisabled() {
|
|
19783
|
+
return this.saveButtonDisabled || this.executionInProgress || this.totalChangesCount === 0;
|
|
19784
|
+
}
|
|
19785
|
+
get saveButtonTooltip() {
|
|
19786
|
+
if (this.executionInProgress)
|
|
19787
|
+
return 'Button will be enabled after execution is complete';
|
|
19788
|
+
return '';
|
|
19789
|
+
}
|
|
19770
19790
|
onSave() {
|
|
19771
|
-
if (!this.
|
|
19791
|
+
if (!this.isSaveDisabled) {
|
|
19772
19792
|
this.saveToTestCase.emit();
|
|
19773
19793
|
}
|
|
19774
19794
|
}
|
|
@@ -19787,10 +19807,10 @@ class SessionChangesModalComponent {
|
|
|
19787
19807
|
}
|
|
19788
19808
|
}
|
|
19789
19809
|
SessionChangesModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19790
|
-
SessionChangesModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SessionChangesModalComponent, selector: "cqa-session-changes-modal", inputs: { isOpen: "isOpen", title: "title", addedSteps: "addedSteps", editedSteps: "editedSteps", deletedSteps: "deletedSteps", saveButtonLabel: "saveButtonLabel", saveButtonDisabled: "saveButtonDisabled", commitMessageTemplate: "commitMessageTemplate" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-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 role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\n </div>\n</div>\n", components: [{ type: 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19810
|
+
SessionChangesModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SessionChangesModalComponent, selector: "cqa-session-changes-modal", inputs: { isOpen: "isOpen", title: "title", addedSteps: "addedSteps", editedSteps: "editedSteps", deletedSteps: "deletedSteps", saveButtonLabel: "saveButtonLabel", saveButtonDisabled: "saveButtonDisabled", executionInProgress: "executionInProgress", commitMessageTemplate: "commitMessageTemplate" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-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 role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSaveDisabled\"\n [attr.aria-disabled]=\"isSaveDisabled\"\n [tooltip]=\"saveButtonTooltip\"\n tooltipPosition=\"above\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\n </div>\n</div>\n", components: [{ type: 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19791
19811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, decorators: [{
|
|
19792
19812
|
type: Component,
|
|
19793
|
-
args: [{ selector: 'cqa-session-changes-modal', host: { class: 'cqa-ui-root' }, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-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 role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
19813
|
+
args: [{ selector: 'cqa-session-changes-modal', host: { class: 'cqa-ui-root' }, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-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 role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSaveDisabled\"\n [attr.aria-disabled]=\"isSaveDisabled\"\n [tooltip]=\"saveButtonTooltip\"\n tooltipPosition=\"above\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
19794
19814
|
}], propDecorators: { isOpen: [{
|
|
19795
19815
|
type: Input
|
|
19796
19816
|
}], title: [{
|
|
@@ -19805,6 +19825,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19805
19825
|
type: Input
|
|
19806
19826
|
}], saveButtonDisabled: [{
|
|
19807
19827
|
type: Input
|
|
19828
|
+
}], executionInProgress: [{
|
|
19829
|
+
type: Input
|
|
19808
19830
|
}], commitMessageTemplate: [{
|
|
19809
19831
|
type: Input
|
|
19810
19832
|
}], closeModal: [{
|