@cqa-lib/cqa-ui 1.1.469 → 1.1.470
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/error-modal/error-modal.component.mjs +6 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +5 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +5 -2
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/error-modal/error-modal.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -20128,6 +20128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
20128
20128
|
class ErrorModalComponent {
|
|
20129
20129
|
constructor() {
|
|
20130
20130
|
this.isOpen = false;
|
|
20131
|
+
this.status = 'error';
|
|
20131
20132
|
this.title = 'Error';
|
|
20132
20133
|
this.errorMessage = '';
|
|
20133
20134
|
this.totalSteps = 0;
|
|
@@ -20173,12 +20174,14 @@ class ErrorModalComponent {
|
|
|
20173
20174
|
}
|
|
20174
20175
|
}
|
|
20175
20176
|
ErrorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20176
|
-
ErrorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ErrorModalComponent, selector: "cqa-error-modal", inputs: { isOpen: "isOpen", title: "title", instructionalMessage: "instructionalMessage", errorMessage: "errorMessage", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", buttons: "buttons", showLoading: "showLoading", loadingBadgeInlineStyles: "loadingBadgeInlineStyles" }, 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>\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\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 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 <!-- 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=\"Updating Steps..\"\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: 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: 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"] }] });
|
|
20177
|
+
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" }, 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 <!-- 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=\"Updating Steps..\"\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: 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: 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"] }] });
|
|
20177
20178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, decorators: [{
|
|
20178
20179
|
type: Component,
|
|
20179
|
-
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>\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\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 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 <!-- 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=\"Updating Steps..\"\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: [] }]
|
|
20180
|
+
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 <!-- 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=\"Updating Steps..\"\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: [] }]
|
|
20180
20181
|
}], propDecorators: { isOpen: [{
|
|
20181
20182
|
type: Input
|
|
20183
|
+
}], status: [{
|
|
20184
|
+
type: Input
|
|
20182
20185
|
}], title: [{
|
|
20183
20186
|
type: Input
|
|
20184
20187
|
}], instructionalMessage: [{
|